前陣子我用js寫了一個輪播圖，現在的話換成jQuery來實現，先看看效果圖
首先是html結構，如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery版圖片輪播</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="container"> <div class="inner clearfix"> <div class="innerwraper"><img src="img/1.jpg" alt="" /></div> <div class="innerwraper"><img src="img/2.jpg" alt="" /></div> <div class="innerwraper"><img src="img/3.jpg" alt="" /></div> <div class="innerwraper"><img src="img/4.jpg" alt="" /></div> <div class="innerwraper"><img src="img/5.jpg" alt="" /></div> <div class="innerwraper"><img src="img/6.jpg" alt="" /></div> <div class="innerwraper"><img src="img/7.jpg" alt="" /></div> <div class="innerwraper"><img src="img/8.jpg" alt="" /></div> <div class="innerwraper"><img src="img/1.jpg" alt="" /></div> </div> <div class="pagination"> <span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> </div> <a href="javascript:void(0)" class="left-arrow"><</a> <a href="javascript:void(0)" class="right-arrow">></a> </div> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/new.js"></script> </body> </html>
關於css的相關設置：
.container { margin: 20px auto; width: 510px; overflow: hidden; position: relative; } .inner { position: relative; width: 9999px; left: 0; top: 0; } .innerwraper { float: left; } .clearfix { *zoom: 1; } .clearfix:after { display: block; clear: both; visibility: hidden; content: ""; height: 0; } a { text-decoration: none; } .left-arrow { position: absolute; left: 0; top: 40%; width: 10%; height: 20px; text-align: center; line-height: 20px; font-size: 20px; } .right-arrow { position: absolute; right: 0; top: 40%; width: 10%; height: 20px; font-size: 20px; text-align: center; line-height: 20px; } .pagination{ position: absolute; bottom: 10px; width: 100%; text-align: center; } .pagination span{ display: inline-block; width: 30px; height: 30px; background-color: yellow; line-height: 30px; border-radius: 50%; cursor: pointer; } .pagination .active{ background-color: red; color: #FFFFFF; }
我是用的jquery版本是jquery-1.11.3.min.js，這里就不提供了，各位童鞋自己去下載哈
js源代碼：
var innerGroup = $(".innerwraper"); var leftArrow = $(".left-arrow"); var rightArrow = $(".right-arrow"); var spanGroup = $(".pagination span"); var imgWidth = $(".innerwraper img:first-child").eq(0).width(); var _index = 0; var timer = null; var flag = true; rightArrow.on("click", function() { //右箭頭 flag = false; clearInterval(timer); _index++; selectPic(_index); }) leftArrow.on("click", function() { //左箭頭 flag = false; clearInterval(timer); if (_index == 0) { _index = innerGroup.length - 1; $(".inner").css("left", -(innerGroup.length - 1) * imgWidth); } _index--; selectPic(_index); }) spanGroup.on("click", function() { //導航切換 _index = spanGroup.index($(this)); selectPic(_index); }) $(".container").hover(function() { //鼠標移入 clearInterval(timer); flag = false; }, function() { flag = true; timer = setInterval(go, 3000); }); function autoGo(bol) { //自動行走 if (bol) { timer = setInterval(go, 3000); } } autoGo(flag); function go() { //計時器的函數 _index++; selectPic(_index); } function selectPic(num) { $(".pagination span").eq(num).addClass("active").siblings().removeClass("active"); $(".inner").animate({ left: -num * imgWidth, }, 1000, function() { //檢查是否到最后一張 if (_index == innerGroup.length - 1) { _index %= 8; $(".inner").css("left", "0px"); $(".pagination span").eq(0).addClass("active").siblings().removeClass("active"); } }) }
其實原理都是一樣，不過jQuery的原理和js原理都一樣，不過不同的是jQuery已經把相關的方法封裝成了函數，兼容性的相關設置也已經寫好。