這篇文章給大家分享的是有關(guān)如何使用jQuery實現(xiàn)優(yōu)酷首頁輪播圖的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)專注于嘉善企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,成都做商城網(wǎng)站。嘉善網(wǎng)站建設(shè)公司,為嘉善等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

思路

思路其實非常簡單，就是當(dāng)點擊圖片下面的圓點或者圖片兩邊的箭頭時，讓想要看到的圖片走到它的位置，然后當(dāng)前的圖片和想要看到的圖片按照一個方向運動就可以了

例如：我們點擊第五個小圓點，讓第五個圖片跑到當(dāng)前圖片的后面，然后一起向左運動

當(dāng)然了，如果你想要看前面的圖片，讓圖片先跑到當(dāng)前圖片的左邊，然后和當(dāng)前圖片一起向右運動

基本結(jié)構(gòu)與樣式

<div class="lunbo">
 <div class="picture">
  <ul>
  <li><img src="img/1.jpg"></li>
  <li><img src="img/2.jpg"></li>
  <li><img src="img/3.jpg"></li>
  <li><img src="img/4.jpg"></li>
  <li><img src="img/5.jpg"></li>
  </ul>
 </div>
 <ul class="btn">
  <li id="active"><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
 </ul>
 <div id="left"><img src="img/left.png"></div>
 <div id="right"><img src="img/right.png"></div>
 </div>

*{
 margin: 0;
 padding: 0;
}
.lunbo{
 width: 100%;
 height: 410px;
 position: relative;
 text-align: center;

}
.picture{
 width: 1190px;
 height: 480px;
 position: absolute;
 top: 0;
 left: 88px;
 overflow: hidden;
}
.picture li{
 width: 1190px;
 height: 410px;
 margin: 0 auto;
 list-style-type: none;
 margin-top: 70px;
 position: absolute;
 overflow: hidden;
 top: ;
 left: ;
}
.picture img{
 cursor: pointer;
}
.btn{
 display: block;
 width: 150px;
 height: 30px;
 position: absolute;
 top: 460px;
 left: 130px;
}
.btn li{
 display: block;
 width: 10px;
 height: 10px;
 background-color:white;
 list-style-type: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border-radius: 10px;
 cursor: pointer;
}
#active{
 background-color: #03A9F4;
}
.btn li:hover{
 background-color:#9e9e9e;
}
#left{
 position: absolute;
 top: 240px;
 left: 90px;
 cursor: pointer;
}
#right{
 position: absolute;
 top: 240px;
 left: 1220px;
 cursor: pointer;
}

然后我們用jQuery來設(shè)置初始圖片的位置和小圓點的位置

function setCirPos(){
 // 設(shè)置圓點的位置
 $cir.each(function(){
  $(this).css({
  left:$(this).index()*25 + 500
  })
 });
 // 設(shè)置剛開始不顯示的圖片的位置
 $pic.slice(1).each(function(){
  $(this).css({
  left:$picW
  })
 })
 }

自動輪播

先來看看定義的全局變量

var $cir = $('.btn li');
 var $pic = $('.picture li');
 var $picW = $pic.width();
 var $oLeft = $('#left');
 var $oRight = $('#right');
 // 當(dāng)前圖片
 var nowPic = 0;
 // 防止用戶連續(xù)的點擊
 var canClick = true;
 // 定時器
 var timer = null;

設(shè)置nowPic是為了記錄當(dāng)前顯示的圖片，因為這個輪播圖一共有三種觸發(fā)圖片切換的方法，所以這個變量是三個方法要共享的

設(shè)置canClick變量是為了防止用戶在圖片切換動畫效果還未完成的時候在進(jìn)行點擊

// 設(shè)置定時器自動切換
 timer = setInterval(function(){
 auto();
 },2000);
 //自動切換 
 function auto(){
 var index = nowPic + 1;
 if(index < 0){
  index = 4;
 }else if(index > 4){
  index = 0;
 }
 $pic.eq(index).css('left',$picW);
 $pic.eq(nowPic).animate({left:-$picW}, 400);
 $pic.eq(index).animate({left:0}, 400);
 nowPic = index;
 // 設(shè)置當(dāng)前圖片的圓點的樣式
 $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 }

點擊小圓點

圖片切換的方法都是一樣的但是要注意，當(dāng)點擊小圓點時要清楚圖片自動切換的定時器，在圖片切換完成后，在設(shè)置自動切換的定時器

function lunbo(){
 $cir.click(function(){
  clearInterval(timer);
  var index = $(this).index();
  if(index > nowPic){
  // 點擊的值大于當(dāng)前的值
  $pic.eq(index).css('left',$picW);
  $pic.eq(nowPic).animate({left:-$picW},400);
  }else if(index < nowPic){
  // 點擊的值小于當(dāng)前的值
  $pic.eq(index).css('left',-$picW);
  $pic.eq(nowPic).animate({left:$picW},400);
  }
  $pic.eq(index).animate({left:0},400,function(){
  timer = setInterval(function(){
   auto();
  },3000);
  });
  nowPic = index;
  // 設(shè)置當(dāng)前圖片的圓點的樣式
  $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 });
 }

點擊箭頭

當(dāng)點擊箭頭時，我們?yōu)榱朔乐褂脩舳啻芜B續(xù)的點擊，所以設(shè)置了canClick這個全局變量，當(dāng)點擊了箭頭時，要首先判斷是否有為完成的動畫即canClick是否為true,如果為true,就將canCilck設(shè)置為false，防止再次點擊箭頭，然后進(jìn)行圖片切換的動畫，同樣不要忘了清楚定時器，最后當(dāng)切換圖片的動畫完成時，animate()方法的回調(diào)函數(shù)執(zhí)行，將canClick設(shè)置為true

// 點擊左箭頭
 $oLeft.click(function(){
 if(canClick){
  clearInterval(timer);
  canClick = false;
  var index = nowPic - 1;
  if(index < 0){
  index = 4;
  }else if(index > 4){
  index = 0;
  }
  $pic.eq(index).css('left',-$picW);
  $pic.eq(nowPic).animate({left:$picW}, 400);
  $pic.eq(index).animate({left:0}, 400,function(){
  canClick = true;
  timer = setInterval(function(){
   auto();
  },3000);
  });
  nowPic = index;
  // 設(shè)置當(dāng)前圖片的圓點的樣式
  $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 }
 })

// 點擊右箭頭
 $oRight.click(function(){
 if(canClick){
  clearInterval(timer);
  canClick = false;
  var index = nowPic + 1;
  if(index < 0){
  index = 4;
  }else if(index > 4){
  index = 0;
  }
  $pic.eq(index).css('left',$picW);
  $pic.eq(nowPic).animate({left:-$picW}, 400);
  $pic.eq(index).animate({left:0}, 400,function(){
  canClick = true;
  timer = setInterval(function(){
   auto();
  },3000);
  });
  nowPic = index;
  // 設(shè)置當(dāng)前圖片的圓點的樣式
  $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 }
 })

感謝各位的閱讀！關(guān)于“如何使用jQuery實現(xiàn)優(yōu)酷首頁輪播圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：如何使用jQuery實現(xiàn)優(yōu)酷首頁輪播圖-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://jinyejixie.com/article6/jeiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、ChatGPT、靜態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)