Javascript 在图像滚动时设置图像动画
我写了一个小的div滑块,每5秒滚动一次放入div的图像,并且在侧面有两个箭头,可以立即触发滑动。这并不重要,当图像向左或向右滑动时,或者当它们自动滑动时,我希望图像上会出现某种动画,比如褪色或剪切,而不仅仅是滑动 Javascript代码:Javascript 在图像滚动时设置图像动画,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我写了一个小的div滑块,每5秒滚动一次放入div的图像,并且在侧面有两个箭头,可以立即触发滑动。这并不重要,当图像向左或向右滑动时,或者当它们自动滑动时,我希望图像上会出现某种动画,比如褪色或剪切,而不仅仅是滑动 Javascript代码: <script type="text/javascript"> function createSlider(el_left, el_right, items) { var index = 0;
<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>
<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>
#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{
}
这是我的完整代码。它工作正常,我唯一想要的是,当图像滚动时,我希望它们以风格滚动或带有一些动画 我将执行以下操作: 1) 添加一个类来处理CSS中的淡入淡出
.fade-in {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade-out {
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
2) 然后在代码中的适当位置添加/删除类,例如:
$this.removeClass('fade-in');
$this.addClass('fade-out');
$next.removeClass('fade-out');
$next.addClass('fade-in');
@ryadavilli抱歉我不明白。@mr_app你能在评论框中给出一个例子,或者回答上面发布的代码吗。如果你能为你的图片提供可访问的URL,我很乐意尝试一下JSFIDLE。嘿,兄弟,我为你做了一个粗略的JSFIDLE,图像不在那里,但即使单击缺少的图像图标,其功能也很好。