溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery實(shí)現(xiàn)輪播圖的方法

發(fā)布時(shí)間：2020-08-04 11:02:38 來源：億速云 閱讀：121 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了jQuery實(shí)現(xiàn)輪播圖的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>JQuery輪播圖</title>
 <style>
 *{
 padding:0;
 margin:0;
 }
 .container{
 width:600px;
 height:400px;
 overflow: hidden;
 position:relative;
 margin:0 auto;
 }
 .list{
 width:3000px;
 height:400px;
 position:absolute;

 }
 .list>img{
 float:left;
 width:600px;
 height:400px;
 }
 .pointer{
 position:absolute;
 width:100px;
 bottom:20px;
 left:250px;
 }
 .pointer>span{
 cursor:pointer;
 display:inline-block;
 width:10px;
 height:10px;
 background: #7b7d80;
 border-radius:50%;
 border:1px solid #fff;
 }
 .pointer .on{
 background: #28a4c9;
 }
 .arrow{
 position:absolute;
 text-decoration:none;
 width:40px;
 height:40px;
 background: #727d8f;
 color:#fff;
 font-weight: bold;
 line-height:40px;
 text-align:center;
 top:180px;
 display:none;
 }
 .arrow:hover{
 background: #0f0f0f;
 }
 .left{
 left:0;
 }
 .right{
 right:0;
 }
 .container:hover .arrow{
 display:block;
 }
 </style>
</head>

<body>
 <div class="container">
 <div class="list" >
 <!--<img src="../static/image/photo1.jpg" alt="5"/>-->
 <img src="../static/image/banner.jpg" alt="1"/>
 <img src="../static/image/slide1.jpg" alt="2"/>
 <img src="../static/image/slide1.jpg" alt="3"/>
 <img src="../static/image/slide1.jpg" alt="4"/>
 <img src="../static/image/photo1.jpg" alt="5"/>
 <!--<img src="../static/image/banner.jpg" alt="1"/>-->
 </div>
 <div class="pointer">
 <span index="1" class="on"></span>
 <span index="2"></span>
 <span index="3"></span>
 <span index="4"></span>
 <span index="5"></span>
 </div>
 <a href="#" rel="external nofollow" rel="external nofollow" class="arrow left">&gt;</a>
 <a href="#" rel="external nofollow" rel="external nofollow" class="arrow right">&lt;</a>
 </div>

 <script src="../static/js/jquery-3.2.1.min.js"></script>
 <script>
 var imgCount = 5;
 var index = 1;
 var intervalId;
 var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
 //自動(dòng)輪播功能 使用定時(shí)器
 autoNextPage();
 function autoNextPage(){
 intervalId = setInterval(function(){
 nextPage(true);
 },3000);
 }
 //當(dāng)鼠標(biāo)移入 停止輪播
 $('.container').mouseover(function(){
 console.log('hah');
 clearInterval(intervalId);
 });
 // 當(dāng)鼠標(biāo)移出，開始輪播
 $('.container').mouseout(function(){
 autoNextPage();
 });
 //點(diǎn)擊下一頁 上一頁的功能
 $('.left').click(function(){
 nextPage(true);
 });
 $('.right').click(function(){
 nextPage(false);
 });
 //小圓點(diǎn)的相應(yīng)功能 事件委托
 clickButtons();
 function clickButtons(){
 var length = buttonSpan.length;
 for(var i=0;i<length;i++){
 buttonSpan[i].onclick = function(){
 $(buttonSpan[index-1]).removeClass('on');
 if($(this).attr('index')==1){
 index = 5;
 }else{
 index = $(this).attr('index')-1;
 }
 nextPage(true);

 };
 }
 }
 function nextPage(next){
 var targetLeft = 0;
 //當(dāng)前的圓點(diǎn)去掉on樣式
 $(buttonSpan[index-1]).removeClass('on');
 if(next){//往后走
 if(index == 5){//到最后一張，直接跳到第一張
 targetLeft = 0;
 index = 1;
 }else{
 index++;
 targetLeft = -600*(index-1);
 }

 }else{//往前走
 if(index == 1){//在第一張，直接跳到第五張
 index = 5;
 targetLeft = -600*(imgCount-1);
 }else{
 index--;
 targetLeft = -600*(index-1);
 }

 }
 $('.list').animate({left:targetLeft+'px'});
 //更新后的圓點(diǎn)加上樣式
 $(buttonSpan[index-1]).addClass('on');


 }


 </script>
</body>

</html>

效果圖：

jQuery實(shí)現(xiàn)輪播圖的方法

原理：

頁面結(jié)構(gòu)方面：

將輪播圖容器設(shè)置成相對(duì)定位，寬度設(shè)置成圖片的寬度；容器中分為四部分：輪播的圖片；點(diǎn)擊的小按鈕；前一張；后一張

樣式方面：

  • 輪播圖容器為相對(duì)定位，寬度/高度設(shè)置成圖片的寬度/高度，設(shè)置overflow為hidden；
  • 容器中的每一部分都設(shè)置成絕對(duì)定位，放到相應(yīng)的位置；
  • 輪播圖片的容器寬度設(shè)置成所有圖片的寬度和，left開始先設(shè)置為0；
  • 每張圖片寬度一樣，都設(shè)成左浮動(dòng)，左右圖片都在一行排列，所以輪播圖的實(shí)質(zhì)是裝有圖片的容器的移動(dòng)，每次移動(dòng)的距離為一張圖片的寬度，這樣每次就只顯示一張圖片；
  • 前一張/后一張?jiān)O(shè)置成display為none，當(dāng)鼠標(biāo)移入總?cè)萜鲿r(shí)，再設(shè)置成display為block
     

功能方面：

自動(dòng)輪播為一個(gè)定時(shí)循環(huán)機(jī)制setInteval，鼠標(biāo)移入，循環(huán)停止，移除循環(huán)繼續(xù)；

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

看完上述內(nèi)容，是不是對(duì)jQuery實(shí)現(xiàn)輪播圖的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手