jQuery无限滑块-模拟MacApp Store [英] JQuery infinite slider - simulate the MacApp Store
本文介绍了jQuery无限滑块-模拟MacApp Store的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果任何人都知道mac应用商店上的滑块,那么这就是我重新创建的内容.虽然有三个问题.
If anyone knows the slider on the mac app store then this is what I have recreated. Three problems though.
- 右侧的滑块与主推子之间的动画接缝处会出现动画延迟
- insertAfter函数什么都不做
- 滑块不在无限循环中
我已经设置了一个小提琴来测试是否有人可以解决它. http://jsfiddle.net/Z5uER/2/
I have set up a fiddle for testing if anyone can solve it. http://jsfiddle.net/Z5uER/2/
$(document).ready(function(){
$('.sismain a').css('opacity', 0);
var slideqnt = $('.sismain a').length;
var slidecur = 0;
var slidelay = 0;
var slidemove = 0;
$('.sismain a').each(function(){
$(this).delay(slidelay).animate({opacity: 1, leaveTransforms:true}, {duration:2000, queue:true});
slidemove -=167;
$('.siscolin').delay(slidelay - 2000).animate({top: slidemove, leaveTransforms:true}, {duration:2000, queue:true});
slidelay += 6000;
$('.siscolin a:first').insertAfter('.siscolin a:last');
$(this).delay(slidelay).animate({opacity: 0, leaveTransforms:true}, {duration:2000, queue:true});
});
});
推荐答案
我创建了类似的功能.也许我要为此编写一个插件.
I created a similar functionality. Maybe I'm going to write a plugin for this.
请确保将div的所有尺寸都设置为正确的值(以及脚本中的绝对位置):
Be sure to set all the dimensions of your div's to the right values (and also the absolute positioning within the script):
HTML
<div class="slider">
<div class="slides">
<div><img src="http://dummyimage.com/180x90/000/fff" /></div>
<div><img src="http://dummyimage.com/180x90/f00/fff" /></div>
<div><img src="http://dummyimage.com/180x90/0f0/fff" /></div>
<div><img src="http://dummyimage.com/180x90/00f/fff" /></div>
<div><img src="http://dummyimage.com/180x90/f0f/fff" /></div>
</div>
<div class="thumbs">
<div><img src="http://dummyimage.com/60x30/000/fff" /></div>
<div><img src="http://dummyimage.com/60x30/f00/fff" /></div>
<div><img src="http://dummyimage.com/60x30/0f0/fff" /></div>
<div><img src="http://dummyimage.com/60x30/00f/fff" /></div>
<div><img src="http://dummyimage.com/60x30/f0f/fff" /></div>
</div>
</div>
<a id="pause" href="#">pause</a>
CSS
body {
margin: 20px;
}
.slider {
position: relative;
width: 240px;
height: 90px;
overflow: hidden;
}
.slides div {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 90px;
z-index: 1;
display: none;
}
.slides div.first-child {
z-index: 2;
}
.thumbs {
position: absolute;
width: 60px;
height: 90px;
right: 0;
top: 0;
}
.thumbs div {
width: 60px;
height: 30px;
background-color: #f00;
position: absolute;
top: 0;
right: 0;
}
#pause {
background-color: #888;
color: #fff;
font-weight: bold;
text-decoration: none;
font-family: Arial;
border: 1px solid #000;
padding: 10px;
margin-top: 20px;
display: inline-block;
}
JavaScript
var intval = "";
var numberOfSlides = $('.slides > div').length;
var counter = 0;
var thumbs = $('.thumbs div').toArray();
$('.slides div:eq(0)').addClass('first-child');
$(thumbs).each(function(i,el){
$(this).css({top: 90-(i*30+30) + 'px'});
});
var doShit = function() {
if(counter == 0) {
$('.slides div').eq((numberOfSlides-1)).fadeOut('fast');
}
else {
$('.slides div').eq((counter-1)).fadeOut('fast');
}
$(thumbs).each(function(i,el){
$(this).animate({top: '+=30'}, 1000, function(){
if(i==0) {
$(this).css({'top': '-60px'});
thumbs.push(thumbs.shift());
}
});
});
$('.slides div').eq(counter).fadeIn('fast');
if(counter < (numberOfSlides-1)) {
counter++;
}
else {
counter=0;
}
};
var start_Int = function() {
if(intval==""){
intval=window.setInterval(function() { doShit(); },2000);
} else {
stop_Int();
}
};
var stop_Int = function() {
if(intval!="") {
window.clearInterval(intval);
intval="";
}
};
start_Int();
提琴: http://jsfiddle.net/dirkpennings/kf3v8/1/
我希望这会有所帮助.
这篇关于jQuery无限滑块-模拟MacApp Store的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文