dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
生活随笔
收集整理的這篇文章主要介紹了
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、swiper插件：
需要下載該插件到本地，并用link標簽引用其swiper-bundle.min.css文件，用script引用其swiper-bundle.min.js文件，下載地址及官方文檔：https://www.swiper.com.cn/。
該插件提供了很多輪播圖的參數，可實現各種樣式的輪播圖，詳情參見官方文檔。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>輪播圖-swiper插件</title><link rel="stylesheet" href="./swiper-bundle.min.css"><script src="./swiper-bundle.min.js"></script> </head> <body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125010569,136668811&fm=26&gp=0.jpg" alt=""></div><div class="swiper-slide"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1917573789,4173076623&fm=26&gp=0.jpg" alt=""></div><div class="swiper-slide"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596352754828&di=d48398b5009a09e83b9cd8f5bc8b3187&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F31%2Ffd984a04246ebd74ef12d746a74ed2e8.jpg" alt=""></div></div><!-- 如果需要分頁器 --><div class="swiper-pagination"></div><!-- 如果需要導航按鈕 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滾動條 --><!-- <div class="swiper-scrollbar"></div> --></div> </body> <style>.swiper-container {width: 790px;height: 340px;} .swiper-slide img{width: 790px;height: 340px; } </style> <script>var mySwiper = new Swiper ('.swiper-container', {direction: 'horizontal', // 垂直切換選項autoplay: {delay: 1000,//1秒切換一次} ,// 自動播放loop: true, // 循環模式選項// effect : 'fade',切換效果// 如果需要分頁器pagination: {el:'.swiper-pagination'},// 點擊分頁器是否切換到對應的圖片 是 true 否 falsepaginationClickable:true,// 如果需要前進后退按鈕navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 用戶操作swiper之后，是否禁止autoplay。默認為true：停止。// 如果設置為false，用戶操作swiper之后自動切換不會停止，每次都會重新啟動autoplay。// 操作包括觸碰，拖動，點擊pagination等。autoplayDisableOnInteraction:false,// 如果需要滾動條// scrollbar: {// el: '.swiper-scrollbar',// },}) </script> </html>2、原生js
不借助插件實現輪播圖的思路有主要有三種：第一：當前圖片顯示，其他圖片不顯示；第二：通過操作DOM來改變div的背景圖片或者img的src來實現圖片切換，第三：外層div設置overflow：hidden，圖片通過左右移動出現在當前視圖中，如下圖：
這種圖片切換，存在一個問題：因為不是閉環，左右切換到最邊上的時候，會有空白，此時可在最前面加上最后一張圖P4-1，最后面加上最前面一張圖P1-1，點擊向左可以直接到P4-1，然后操作位置到正常序列的P4，就可以正常的向左切換，向右也是一樣的原理。
這里原生js利用的是操作DOM切換img的src來實現；
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>輪播圖-js</title> </head> <style>ul{padding-inline-start: 0px; /*瀏覽器默認樣式為40px,會導致分頁圓點不居中，這里改為0px*/}#loopDiv{width: 790px;height: 340px;margin: 0 auto;position: relative;}#pic{width: 790px;height: 340px;}#list{list-style: none;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;justify-content: space-between;}#list li{float: left;width: 20px;height: 20px;line-height: 20px;border-radius: 50%;background: #aaa;margin-right: 10px;}.chooseBut{width: 50px;height: 80px;background-color: rgba(0,0,0,0.2);color: #fff;font-size: 30px;line-height: 80px;text-align: center;display: none;}#left{position: absolute;left: 0px;top: 130px;}#right{position: absolute;right: 0px;top: 130px;} </style> <body><div id="loopDiv"><img id="pic" src=""></img><ul id="list"><li></li><li></li><li></li></ul><div id="left" class="chooseBut"><</div><div id="right" class="chooseBut">></div></div> </body> <script>var jsDivBox = document.getElementById("loopDiv");//圖片節點var jsImg = document.getElementById("pic");//左右按鈕節點var jsLeft = document.getElementById("left");var jsRight = document.getElementById("right");//獲取所有的livar jsUl = document.getElementById("list");var jsLis = jsUl.getElementsByTagName("li");//讓第一個小圓點變為紅色jsLis[0].style.backgroundColor = "red";//顯示當前的圖片下標var currentPage = 0;//默認顯示第一張圖片jsImg.src = "img/" + currentPage + ".jpg";//啟動定時器var timer = setInterval(func, 1000);function func() {currentPage++;changePic();console.log(currentPage);}function changePic() {if (currentPage == 3) {currentPage = 0;}if (currentPage == -1) {currentPage = 2;}//更換圖片//"img/1.jpg"jsImg.src = "img/" + currentPage + ".jpg";//將所有的小圓點顏色清空for (var i = 0; i < jsLis.length; i++) {jsLis[i].style.backgroundColor = "#aaa";}//改變對應小圓點為紅色jsLis[currentPage].style.backgroundColor = "red";}//鼠標進入jsDivBox.addEventListener("mouseover", func1, false);function func1() {//停止定時器clearInterval(timer);//顯示左右按鈕jsLeft.style.display = "block";jsRight.style.display = "block";}//鼠標移出jsDivBox.addEventListener("mouseout", func2, false);function func2() {//重啟定時器timer = setInterval(func, 1000);//隱藏左右按鈕jsLeft.style.display = "none";jsRight.style.display = "none";}//點擊左右按鈕jsLeft.addEventListener("click", func3, false);function func3() {currentPage--;changePic();}jsLeft.onmouseover = function() {this.style.backgroundColor = "rgba(0,0,0,0.6)";}jsLeft.onmouseout = function() {this.style.backgroundColor = "rgba(0,0,0,0.2)";}jsRight.addEventListener("click", func4, false);function func4() {currentPage++;changePic();}jsRight.onmouseover = function() {this.style.backgroundColor = "rgba(0,0,0,0.6)";}jsRight.onmouseout = function() {this.style.backgroundColor = "rgba(0,0,0,0.2)";}//進入小圓點for (var j = 0; j < jsLis.length; j++) {jsLis[j].onmouseover = function() {currentPage = parseInt(this.innerHTML) - 1;changePic();};}</script> </html>3、jQuery
實現原理與上面的原生js一致，只是jQuery提供了更便捷的API，可以節省代碼量；這里主要用的是左右平移的方法實現切換，另外左右平移可以實現過渡效果，我這里沒有這樣實現，有興趣的小伙伴也可以把自己的代碼曬出來，一起學習。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>輪播圖-jQuery</title><script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><style type="text/css">.pic{width: 790px;height: 340px;margin: 10px auto;position: relative;overflow: hidden;}.content{height: 340px;position: absolute;left: -790px;top: 0px;}.content img{float: left;width: 790px;height: 340px;}.index{position: absolute;left: 50%;bottom: 5px;height: 20px;transform: translateX(-50%);list-style: none;display: flex;justify-content: space-between;}.index li{width: 10px;height: 10px;border-radius: 50%;margin-left: 10px;background-color: rgba(100,100,100,0.3);}.left{width: 30px;height:50px;background-color:rgba(100,100,100,0.5); position: absolute;left: 0px;top: 150px;line-height: 50px;text-align: center;font-size: 20px;color: #fff;display: none;}.right{width: 30px;height:50px;background-color:rgba(100,100,100,0.5); position: absolute;right: 0px;top: 150px;line-height: 50px;text-align: center;font-size: 20px;color: #fff;display: none;}.index .first{background-color:black;}</style></script> </head> <body><div class="pic"><div class="content"><img src="./img/3.jpg" alt=""><img src="./img/1.jpg" alt=""><img src="./img/2.jpg" alt=""><img src="./img/3.jpg" alt=""><img src="./img/1.jpg" alt=""></div><ul class="index"><li class="first"></li><li></li><li></li></ul><div class="right">></div><div class="left"><</div></div><script type="text/javascript">$(function(){console.log($("img"));//每個固定的時間移動圖片var timer = setInterval(picLoop,1000);var index = 0;function picLoop(){index++;console.log(index);if (index==3) {index=0;}$(".content").css("left",-790*(index+1));$("li").eq(index).css("background-color","black").siblings().css("background-color","rgba(100,100,100,0.3)");}//定時器的控制$(".pic").hover(function(){clearInterval(timer);$(".left").show();$(".right").show();},function(){timer = setInterval(picLoop,1000);$(".left").hide();$(".right").hide();})$("li").mouseover(function(){$(this).css("background-color","black").siblings().css("background-color","rgba(100,100,100,0.3)");index = $(this).index();console.log(index);$(".content").css("left",-790*(index+1));})$(".left").click(function(){index--;if (index==-1) {index=2;}$(".content").css("left",-790*(index+1));$("li").eq(index).css("background-color","black").siblings().css("background-color","rgba(100,100,100,0.3)");})$(".right").click(function(){index++;if (index==3) {index=0}$(".content").css("left",-790*(index+1));$("li").eq(index).css("background-color","black").siblings().css("background-color","rgba(100,100,100,0.3)"); })})</script> </body> </html>除以上三種方法以外，還可以用純css來實現，這里就不列出來了，因為日常也不會用到，哈哈哈，偷個懶。
以上是對輪播圖的一個總結，參考鏈接：https://blog.csdn.net/weixin_41897234/article/details/80658856，歡迎大家指正。
總結
以上是生活随笔為你收集整理的dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 7个相同小球4个不同盒子_如何用天平称三
- 下一篇： 一个含n个顶点和e条弧的有向图以邻接矩阵