用jquery创建图片连续滑动效果

下载地址

有时候我们需要显示产品项目幻灯片上每一项连续不断滑动一组项目。在本教程中,我们将创建它们使用jQuery和JavaScript原生函数的帮助窗口。setTimeout举办每一项的动画序列。

• 
• 

CSS.list { display: inline-block; list-style-type: none; margin: 0; width: 100000px; text-align: left; background: url("images/wood.png") bottombottom left no-repeat; } .list li { display: inline-block; width: 78px; margin: 2.2em 1.4em; position: relative; vertical-align: bottombottom; } .next, .prev { display: block; position: absolute; width: 35px; height: 35px; cursor: pointer; border-radius: 5px; } .next { margin-top: -7.2em; rightright: 5%; background: url("images/next.png") center center no-repeat; } .next:hover { background: rgba(255,255,255,0.3) url("images/next.png") center center no-repeat; } .prev { margin-top: 3em; left: 5%; background: url("images/prev.png") center center no-repeat; } .prev:hover { background: rgba(255,255,255,0.3) url("images/prev.png") center center no-repeat; } 初始化变量第一次去是我们以后需要初始化所有的变量。有趣的变量将堆栈数组项及其逆转,他们会分别访问下一个和上一页按钮。onMoving = false; item = $(".list li"); itemReverse = item.get().reverse(); itemSize = item.size(); itemDisplayed = 6; itemToSlide = itemDisplayed * 9; currentSlide = 1; page = Math.round(itemSize/itemDisplayed); 添加点击事件创建标记后我们将添加单击事件上和下一个按钮,如果物品移动幻灯片时我们还会返回false到达最后,第一张幻灯片。$(".next").click(function() { if(onMoving || currentSlide >= 3) return false; onMoving = true, currentSlide++; }); $(".prev").click(function() { if(onMoving || currentSlide == 1) return false; onMoving = true, currentSlide--; }); 连续移动$.each(item, function() { var i = $(this).index(); var delay = i * 100; window.setTimeout(function (index) { return function () { item.eq(index).stop().animate({ "right" : "+="+itemToSlide+"em" }, function() { if(index >= itemSize-1) onMoving = false; }); }; } (i), delay); });

dd: