如果有人知道mac app store上的滑块,那么这就是我重新创建的内容。但有三个问题。
我已经设置了一个小提琴,用于测试是否有人可以解决它。 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});
});
});
答案 0 :(得分:2)
我创建了一个类似的功能。也许我会为此写一个插件。
务必将div的所有尺寸设置为正确的值(以及脚本中的绝对位置):
<强> 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/
我希望这会有所帮助。