Jquery实现图片轮播,轮播思路如下
![轮播图片简易思路解说](https://img-blog.csdn.net/20131025184620015?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd216eTEwNjcxMTExMTA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
.box {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
border: 1px solid blue;
}
.imgList {
display: block;
width:1400px;
position: relative;
left: -200px;//默认图片列表的left:-200px
}
.imgList li {
display: block;
float: left;
width: 198px;
height: 198px;
border: 1px solid red;
}
.imgList li img{
width: 198px;
height: 198px;
}
(function TurnImage(boxId, imgListId, picBtnListId, btnPId, btnNId, isPlay, direction) {
var box = $("#" + boxId);
var imgList = $("#" + imgListId);
var picBtnList = $("#" + picBtnListId);
var btnP = $("#" + btnPId);
var btnN = $("#" + btnNId);
var w = $(imgList).css("left");
var num = ["1","2","3","4","5","6","7","8"];
var i = j = 0;
$(imgList).children().each(function(){
$(this).attr({name:num[i]});
i++;
});
$(picBtnList).children().each(function(){
$(this).attr({name:num[j]});
j++;
});
function changeState(){
$(imgList).children().removeClass();
$(picBtnList).children().removeClass();
$(imgList).children(":eq(1)").addClass("active");
$(picBtnList).children().each(function(){
var picBtnListLiName = $(this).attr("name");
var imgListLiName = $(imgList).children(":eq(1)").attr("name");
if(picBtnListLiName==imgListLiName){
$(this).addClass("now");
}
});
}
function nextImg(step) {
step = arguments[0] ? arguments[0] : 1;
var f = $(imgList).children(":lt("+step+")").detach();
$(imgList).append(f);
$(imgList).css("left", "0");
$(imgList).stop(true, false).animate({left: w}, "slow");
changeState();
}
function preImg(step){
step = arguments[0] ? arguments[0] : 1;
step = $(imgList).children().length-step-1;
var l = $(imgList).children(":gt("+step+")").detach();
$(imgList).prepend(l);
$(imgList).css("left", parseInt(w)*2+"px");
$(imgList).stop(true, false).animate({left: w}, "slow");
changeState();
}
$(btnN).click(function(){
nextImg(1);
});
$(btnP).click(function(){
preImg(1);
});
if (isPlay) {
if(direction=="left"){
funDe=nextImg;
}
else{
funDe=preImg;
}
autoPlay = setInterval(funDe, 2000);
$(box).hover(
function () {
clearInterval(autoPlay);
},
function () {
autoPlay = setInterval(funDe, 2000);
}
);
$(btnN).hover(
function () {
clearInterval(autoPlay);
},
function () {
autoPlay = setInterval(funDe, 2000);
}
);
$(btnP).hover(
function () {
clearInterval(autoPlay);
},
function () {
autoPlay = setInterval(funDe, 2000);
}
);
}
// 鼠标焦点
$("#picBtn ul li").hover(
function () {
clearInterval(autoPlay);
var btnNum = $(this).attr("name");//鼠标选择的数字2
var actNum = $(".active").attr("name");
if(btnNum!=actNum){
var d_value = btnNum>actNum ? btnNum-actNum : actNum-btnNum;
if(btnNum>actNum){
var d_value = btnNum-actNum;
nextImg(d_value);
}
else{
var d_value = actNum-btnNum;//获取鼠标与当前图片的差值,差几就上一张几次
preImg(d_value);
}
}
},
function () {
autoPlay = setInterval(funDe, 2000);
}
);
})("box", "imgList", "picBtnList", "btnP", "btnN", true, "left");
$(document).ready(function(){
});
说明:开始没有考略到用stop()清除animate的动画队列,所以在写代码的时候一直很纠结那个让人看起来很别扭的动画效果,
之后查找资料,颇有收获:
Jquery定义了一些动画和队列相关的方法,stop()方法:它是用来停止选中元素上的当前正在执行的任何动画。stop()方法接受两个布尔参数。如果第一个参数为true,会清除该选中元素上的动画队列:除了停止当前动画,还会取消任何等待执行的动画。第一个参数的默认值为false:如果忽略该参数,等待执行的动画不会被取消。第二个参数用来指定正在连续变化的CSS属性是否保留当前值,还是应该变化到最终目标值。传入true可以让它们变化到最终值。传入false(或者省略该参数)会让它们保持为当前值。
这样就解决了当我们快速的触发animate时产生的奇怪特效。
源码见:源码 github benbenye