我写了一个小的 div 滑块,它每 5 秒滚动一次放入 div 中的图像,并且侧面还有两个箭头可以立即触发滑动。好吧,这并不重要,当图像向左或向右滑动或自动滑动时,我希望图像上发生某种动画,例如褪色或剪切,而不仅仅是滑动。
Javascript代码:
<script type="text/javascript">
function createSlider(el_left, el_right, items) {
var index = 0;
var refreshId;
var items=$('.box');
var restartAnimation = function() {
clearInterval(refreshId);
refreshId = setInterval( function()
{
var $this = items.eq(index);
$this.animate({
left: '-50%'
}, 500);
index = (index + 1) % items.length;
var $next = items.eq(index);
$next.css('left', '150%');
$next.animate({
left: '50%'
}, 500);
},5000);
}
restartAnimation()
el_left.click(function() {
restartAnimation();
var $this = items.eq(index);
$this.animate({
left: '-50%'
}, 500);
index = (index + 1) % items.length;
var $next = items.eq(index);
$next.css('left', '150%');
$next.animate({
left: '50%'
}, 500);
});
el_right.click(function() {
restartAnimation();
var $this = items.eq(index);
$this.animate({
left: '150%'
}, 500);
index = (index - 1) % items.length;
var $next = items.eq(index);
$next.css('left', '-50%');
$next.animate({
left: '50%'
}, 500);
});
}
createSlider($('.Animate'), $('.Animate2'), $('.box'))
</script>
HTML 代码:
<div id="container" class="imageSlider">
<div id="box1" class="box"><img style="height: 190px;width: auto;vertical-align: middle;margin: 0px 50px 12px 0px;" src="images/image1.png" class="emages"></div>
<div id="box2" class="box"><img style="height: 185px;width: auto;vertical-align: middle;" src="images/image2.png" class="emages"></div>
<div id="box3" class="box"><img style="height:264px;margin-top:0px;margin-left: 200px;width:auto;" src="images/image3.png" class="emages"></div>
<div id="box4" class="box"><img style="height: 265px;width: auto;vertical-align: middle;margin: 51px 60px 0 -31px;" src="images/image4.png" class="emages"></div>
<div id="box5" class="box"><img style="height: 194px;width: auto;vertical-align: middle;" src="images/image5.png" class="emages"></div>
<div id="box6" class="box"><img style="height: 230px;width: auto;vertical-align: middle;margin: -50px 50px;" src="images/image6.png" class="emages"></div>
<div id="box7" class="box"><img style="height: 230px;width: auto;vertical-align: middle;margin: -50px 50px;" src="images/image7.png" class="emages"></div>
<div><input type="image" id="animate1" src="nav-left.png" class="Animate"></div>
<div><input type="image" id="animate2" src="nav-right.png" class="Animate2"></div>
</div>
CSS 代码:
#container {
position: absolute;
margin: 120px auto;
padding: 0px;
width: 700px;
height: 350px;
overflow: hidden;
left: 24%;
}
.box {
position: absolute;
width: 100%;
height: 300px;
line-height: 300px;
font-size: 15px;
text-align: center;
left: 150%;
top: 84px;
margin-left: -48%;
color: white;
}
#box1 {
left: 50%;
}
#box2 {
}
#box3 {
}
#box4 {
}
#box5 {
}
#box6 {
}
#box7{
}
所以这是我的完整代码。它工作正常,我唯一想要的是,当图像滚动时,我希望它们以样式滚动或带有一些动画。