之前頁面需要圖片輪播的時(shí)候，都是直接在網(wǎng)上找一個(gè)插件，然后自己動(dòng)手改一下，把圖片的路徑改成自己圖片的路徑，然后萬事大吉。后來覺得這樣并不能提高自己的前端水平，于是乎，自己動(dòng)手寫了一個(gè)圖片輪播的小demo，用的是jquery，小弟前端小白一個(gè)，各位前端大神看了之后，望批評指正。
我的思路是這樣的，定義兩個(gè)變量，一個(gè)用來保存當(dāng)前頁碼$index,一個(gè)用來保存上一頁的頁碼$exdex,首先判斷$index和$exdex的大小，如果$index大于$exdex,說明是朝左翻頁，反之，就是朝右翻頁。如果是朝左翻頁，就把當(dāng)前頁朝左偏移100%的寬度，讓下一頁同樣朝左偏移100%寬度。以下是代碼部分：
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .banner{ width:300px; height:250px; position: relative; z-index: 100; background: skyblue; margin:100px auto; overflow:hidden ; } .banner .first{ left:0; } .banner a{ width: 100%; height: 100%; position: absolute; display:block; top:0; left:100%; } .banner a img{ width: 100%; height: 100%; } .banner .pre{ position: absolute; left:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .banner .next{ position: absolute; right:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .choose{ position: absolute; width:100px; height:20px; bottom:10px; left:90px; z-index: 1000; } .choose span{ display: block; float: left; margin-left:15px; width:10px; height:10px; border-radius: 10px; background: blue; cursor: pointer; } .choose .red{ background: red; } </style></head><body> <div class="banner"> <span class="pre"><=</span> <span class="next">=></span> <a href="#" class="first"><img src="./1.jpg" alt=""/></a> <a href="#"><img src="./2.jpg" alt=""/></a> <a href="#"><img src="./3.jpg" alt=""/></a> <a href="#"><img src="./4.jpg" alt=""/></a> <div class="choose"> <span class="red"></span> <span></span> <span></span> <span></span> </div> </div></body><script src="./jquery.min.js"></script><script> var $index = 0; var $exdex = 0; $('.choose span').mouseover(function(){ $index = $(this).index(); $('.choose span').eq($index).addClass("red").siblings().removeClass("red"); if($index > $exdex) { next(); } else { pre(); } return $exdex = $index; }); function next() { $('.banner a').eq($index).stop(true,true).css('left',"100%").animate({"left":0}); $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"-100%"}); } function pre() { $('.banner a').eq($index).stop(true,true).css('left',"-100%").animate({"left":"0"}); $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"100%"}); }</script></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
