大致介紹
看到了一個輪播圖的思路，就想的自己動手實(shí)踐一下，總體來說用jQuery實(shí)現(xiàn)起來簡單多了
思路
思路其實(shí)非常簡單，就是當(dāng)點(diǎn)擊圖片下面的圓點(diǎn)或者圖片兩邊的箭頭時(shí)，讓想要看到的圖片走到它的位置，然后當(dāng)前的圖片和想要看到的圖片按照一個方向運(yùn)動就可以了
例如：我們點(diǎn)擊第五個小圓點(diǎn)，讓第五個圖片跑到當(dāng)前圖片的后面，然后一起向左運(yùn)動
當(dāng)然了，如果你想要看前面的圖片，讓圖片先跑到當(dāng)前圖片的左邊，然后和當(dāng)前圖片一起向右運(yùn)動
基本結(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è)置初始圖片的位置和小圓點(diǎn)的位置
function setCirPos(){ // 設(shè)置圓點(diǎn)的位置 $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ù)的點(diǎn)擊 var canClick = true; // 定時(shí)器 var timer = null;設(shè)置nowPic是為了記錄當(dāng)前顯示的圖片，因?yàn)檫@個輪播圖一共有三種觸發(fā)圖片切換的方法，所以這個變量是三個方法要共享的
設(shè)置canClick變量是為了防止用戶在圖片切換動畫效果還未完成的時(shí)候在進(jìn)行點(diǎn)擊
// 設(shè)置定時(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)前圖片的圓點(diǎn)的樣式 $cir.eq(nowPic).attr('id','active').siblings().attr('id',''); }點(diǎn)擊小圓點(diǎn)
圖片切換的方法都是一樣的但是要注意，當(dāng)點(diǎn)擊小圓點(diǎn)時(shí)要清楚圖片自動切換的定時(shí)器，在圖片切換完成后，在設(shè)置自動切換的定時(shí)器
function lunbo(){ $cir.click(function(){ clearInterval(timer); var index = $(this).index(); if(index > nowPic){ // 點(diǎn)擊的值大于當(dāng)前的值 $pic.eq(index).css('left',$picW); $pic.eq(nowPic).animate({left:-$picW},400); }else if(index < nowPic){ // 點(diǎn)擊的值小于當(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)前圖片的圓點(diǎn)的樣式 $cir.eq(nowPic).attr('id','active').siblings().attr('id',''); }); }點(diǎn)擊箭頭
當(dāng)點(diǎn)擊箭頭時(shí)，我們?yōu)榱朔乐褂脩舳啻芜B續(xù)的點(diǎn)擊，所以設(shè)置了canClick這個全局變量，當(dāng)點(diǎn)擊了箭頭時(shí)，要首先判斷是否有為完成的動畫即canClick是否為true,如果為true,就將canCilck設(shè)置為false，防止再次點(diǎn)擊箭頭，然后進(jìn)行圖片切換的動畫，同樣不要忘了清楚定時(shí)器，最后當(dāng)切換圖片的動畫完成時(shí)，animate()方法的回調(diào)函數(shù)執(zhí)行，將canClick設(shè)置為true
// 點(diǎn)擊左箭頭 $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)前圖片的圓點(diǎn)的樣式 $cir.eq(nowPic).attr('id','active').siblings().attr('id',''); } })// 點(diǎn)擊右箭頭 $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)前圖片的圓點(diǎn)的樣式 $cir.eq(nowPic).attr('id','active').siblings().attr('id',''); } })總結(jié)
這個效果實(shí)現(xiàn)起來很簡單，就是剛開始沒有想到實(shí)現(xiàn)的思路。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
