2017/3/3

最近用到的几种jq图片轮播。

1.不是无缝的轮播：

//图片宽度自适应
var oImglist=document.getElementById('imglist');
var windowWidth=document.body.clientWidth;
$('#imglist li').css('width',windowWidth);
if (windowWidth>640)
{
    oImglist.style.width=640*$('#imglist li').length+'px';
}
if (windowWidth<640)
{
    oImglist.style.width=windowWidth*$('#imglist li').length+'px';
}
var curIndex = 0, //当前index
        imgLen = $(".imglist li").length; //图片总数
// 定时器自动变换2.5秒每次
var autoChange = setInterval(function(){
    if(curIndex < imgLen-1){
        curIndex ++;
    }else{
        curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex);
},2500);

//对右下角按钮index进行事件绑定处理等
$(".indexlist").find("span").each(function(item){
    $(this).hover(function(){
        clearInterval(autoChange);
        changeTo(item);
        curIndex = item;
    },function(){
        autoChangeAgain();
    });
});
//清除定时器时候的重置定时器--封装
function autoChangeAgain(){
    autoChange = setInterval(function(){
        if(curIndex < imgLen-1){
            curIndex ++;
        }else{
            curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex);
    },2500);
}
function changeTo(num){
    var windowWidth=document.body.clientWidth;
    if (windowWidth>640)
    {
        var goLeft=num*640;
    }
    else
    {
        var goLeft = num * windowWidth;
    }
    $(".imglist").animate({left: "-" + goLeft + "px"},500);
    $(".indexlist").find("span").removeClass("this").eq(num).addClass("this");
}

2.无缝轮播：

//图片宽度自适应
var oImglist=document.getElementById('imglist');
var windowWidth=document.body.clientWidth;
$('#imglist li').css('width',windowWidth);
if (windowWidth>640)
{
    oImglist.style.width=640*6+'px';
}
if (windowWidth<640)
{
    oImglist.style.width=windowWidth*6+'px';
}
var i = 0;

var clone = $(".lunbo .imglist li").first().clone();//克隆第一张图片
$(".lunbo .imglist").append(clone);//复制到列表最后
var size = $(".lunbo .imglist li").length;

$("#banner .indexlist span").first().addClass("this");

/*自动轮播*/

var t = setInterval(function () { i++; move();},2000);

/*鼠标悬停事件*/

$("#banner").hover(function () {
    clearInterval(t);//鼠标悬停时清除定时器
}, function () {
    t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时清除定时器
});

/*鼠标滑入原点事件*/

$("#banner .indexlist span").hover(function () {

    var index = $(this).index();//获取当前索引值
    i = index;
    $("#banner .imglist").stop().animate({ left: -index * windowWidth }, 500);
    $(this).addClass("this").siblings().removeClass("this");
});

/*移动事件*/
function move() {
    if (i == size) {
        $(".lunbo .imglist").css({ left: 0 });
        i = 1;
    }
    if (i == -1) {
        $(".lunbo .imglist").css({ left: -(size - 1) * windowWidth });
        i = size - 2;
    }
    $(".lunbo .imglist").stop().animate({ left: -i * windowWidth }, 500);

    if (i == size - 1) {
        $("#banner .indexlist span").eq(0).addClass("this").siblings().removeClass("this");
    } else {
        $("#banner .indexlist span").eq(i).addClass("this").siblings().removeClass("this");
    }
}