使用jquery實現輪播圖效果
阿新 • • 發佈:2021-01-04
今天給大家分享的是利用jquery實現輪播圖的效果,廢話不多說咯,直接上程式碼,當然每行程式碼會有註釋了,這樣也便於理解哦。
第一步:先引進jquery檔案
<script src="./jquery.js"></script>
第二步:html樣式
<div id="banner"> <!-- 圖片 --> <ul id="banner_img"> <li> <img src="./img/1.jpg" alt="使用jquery實現輪播圖效果"> </li> <li> <img src="./img/2.jpg" alt="使用jquery實現輪播圖效果"> </li> <li> <img src="./img/3.jpg" alt="使用jquery實現輪播圖效果"> </li> <li> <img src="./img/4.jpg" alt="使用jquery實現輪播圖效果"> </li> </ul> <!-- 圓點 --> <ul id="banner_yuandian"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <!-- < >箭頭指向 --> <button id="banner_back"><</button> <button id="banner_next">></button> </div>
第三步:css樣式
<style> *{ margin: 0; padding: 0; list-style: none; } #banner{ position: relative; } /*圖片樣式 */ #banner #banner_img{ width: 300px; height: 300px; border: 2px red solid; } #banner #banner_img img{ width: 300px; height: 300px; } #banner #banner_img>li{ display: none; } #banner #banner_img :first-child{ display:block; } /* 圓點樣式 */ #banner_yuandian{ position: absolute; bottom: 10px; display: flex; margin-left: 35px; } #banner_yuandian li{ margin-left: 30px; width: 20px; height: 20px; border: 1px red solid; border-radius: 50%; text-align: center; } #banner_yuandian li:hover{ background: orange; } #banner_yuandian .active{ background: orange; } /* 箭頭樣式 */ #banner_back{ width: 30px; height: 30px; position: absolute; margin-top: -150px; } #banner_next{ width: 30px; height: 30px; position: absolute; margin-top: -150px; margin-left: 273px; } </style>
第四步:js樣式
<script> //設定圖片,圓點,箭頭共同的下標 從0開始 var index=0; //封裝輪播的函式 第一步 function show(){ //下標每次+1增加 index+=1; //如果下標大於等於圖片的長度數,返回第一張圖,即是下標index=0就行 if(index>=$("#banner_img>li").length){ index=0; } //讓li的每張圖片點選時顯示自己,其他兄弟隱藏 $("#banner_img>li").eq(index).show(1000).siblings().hide(1000); //圓點的下標也需要封裝一下樣式 $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active"); } //利用計時器達到輪播效果 第二步 var x=setInterval(show,2000); //滑鼠移動到圖片上時清除計時器,移出之後重新加入計時器 $("#banner_img>li").hover( function(){ clearInterval(x); },function(){ x=setInterval(show,2000); } ) //圓點設定,點選圓點,切換相應圖片 第三步 $("#banner_yuandian>li").on("click",function(){ //點選圓點時的下標取共同下標 var index=$(this).index();//出錯的地方index()語法 //點選下標時展現對應的圖片,其他兄弟圖隱藏 $("#banner_img>li").eq(index).show(1000).siblings().hide(1000); //點選圓點,新增樣式,其他刪除 $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active"); }) //滑鼠滑動上去滑動出來要清除計時器和再次設定計時器 第四步 $("#banner_yuandian>li").hover( function(){ clearInterval(x); },2000); } ) //箭頭設定 第五步 $("#banner_back").on("click",function(){ //點選一次減去1 index--; //當下標小於0時,就返回第一張圖 if(index<0){ index=0; } //點選下標時展現對應的圖片,其他兄弟圖隱藏 $("#banner_img>li").eq(index).show(1000).siblings().hide(1000); //點選圓點,新增樣式,其他刪除 $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active"); }) //下一張 可以直接呼叫 $("#banner_next").on("click",function(){ show(); }) //點選button按鈕再次清除計時器和新增計時器 $("button").hover( function(){ clearInterval(x); },2000); } )
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。