jquery循环滚动效果

jquery循环滚动效果

//jquery焦点图插件百度其实是很多很多的，只是很多时候还是不能满足项目的需求，这是一款可以循环滚动效果，支持图片及文字混排
//主要样式
/*.slides{ width: 750px; height: 500px; position: relative; overflow: hidden; margin: 0 auto }
.scroll{ width: 1000%; position: relative; }
.scroll:after{ content: ''; clear: both; display: block; visibility: hidden }
.scroll .item{ float: left; width: 200px; height: 400px; background: #42b983; margin-top: 50px; }
.scroll .item.active{ width: 350px; height: 500px; margin-top: 0; background: #ddd }

html结构
<div class="slides">
    <div class="scroll">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    </div>
    <a href="javascript:;" class="arrow arrow-left">left</a>
    <a href="javascript:;" class="arrow arrow-right">right</a>
    </div>
*/
//js
var arrowLeft = $(".arrow-left");
var arrowRight = $(".arrow-right");
var scroll = $(".scroll");
var itemWidth=scroll.find(".item").outerWidth();
//clone(); //如果不够的话复制
function clone() {
    var len = scroll.find(".item").length;
    if (len < 4) {
        scroll.append(scroll.find(".item").clone());
        clone();
    }
}
//设定宽，+150是中间那个大的宽
scroll.css({"width": itemWidth * scroll.find(".item").length + 150});
scroll.find(".item").eq(1).addClass("active");
arrowLeft.click(function () {
    if (!scroll.is(":animated")) {
        scroll.prepend(scroll.find(".item:last"));
        scroll.css("left", - itemWidth);
        scroll.find(".item").removeClass("active");
        scroll.find(".item").eq(1).addClass("active");
        scroll.animate({"left": 0});
    }
});
arrowRight.click(function () {
    if (!scroll.is(":animated")) {
        scroll.find(".item").removeClass("active");
        scroll.find(".item").eq(2).addClass("active");
        scroll.animate({
                "left": -itemWidth
            },
            function () {
                $(this).find(".item:first").appendTo(this);
                $(this).css("left", 0);
            });
    }
});
//添加自动滚动
var timer = setInterval(function () {
    arrowRight.trigger("click");
}, 5000);
//鼠标移上去时停止滚动
$(".slides").mouseenter(function () {
    clearInterval(timer);
}).mouseleave(function () {
    timer = setInterval(function () {
        arrowRight.trigger("click");
    }, 5000);
});

//适当的添加一些css3过渡动画，脚本可以参考前面的jquery插件封装方法将代码给做成一个插件，使用就很方便了