前阵子我用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已经把相关的方法封装成了函数，兼容性的相关设置也已经写好。