使用jquery實現輪播圖效果
今天給大傢分享的是利用jquery實現輪播圖的效果,廢話不多說咯,直接上代碼,當然每行代碼會有註釋瞭,這樣也便於理解哦。
第一步:先引進jquery文件
<script src="./jquery.js"></script>
第二步:html樣式
<div id="banner"> <!-- 圖片 --> <ul id="banner_img"> <li> <img src="./img/1.jpg" alt=""> </li> <li> <img src="./img/2.jpg" alt=""> </li> <li> <img src="./img/3.jpg" alt=""> </li> <li> <img src="./img/4.jpg" alt=""> </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); }, function(){ x=setInterval(show,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); }, function(){ x=setInterval(show,2000); } )
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。