Question

我写了一个小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 code：

        <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{

}

所以这是我的完整代码。并且它正常工作，我想要的只是当图像滚动时我希望它们以样式或动画滚动。

Answer 1

我会做以下事情：

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');

在滚动图像时为其设置动画

1 个答案: