css的animation怎么设置图片循环播放（无后退）而不是播完最后一张又倒退回第一张放

html-css017

css的animation怎么设置图片循环播放（无后退）而不是播完最后一张又倒退回第一张放,第1张

肯定是做2张同样的第一张图片的，做的不好的视觉上会认为有退回去的感觉，那是没有理解这个循环的本质，在css里，计算机不会把这些图片看成桶状去循环，图片永远是平面的，所以第一张图片过渡时间+最后一张图片过渡时间=其他任意一张图片的过渡时间，这样衔接才完美，由于人眼的视觉停留错位差，你不能让图片过渡时间过长，每个人的视觉停留时间是不一致的，你可以自己设定你认为的时间，比如5张图片5秒循环完，也就是duration设置5s，必须设置direction，速度曲线根据自己喜好设，没有动感的过渡是不完美的

<DIV id=demo_1 style="OVERFLOW: hiddenHEIGHT: 136px">

<DIV id=demo1_1>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

</DIV>

<DIV id=demo2_1></DIV></DIV>

<SCRIPT>

var speed=25

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT>

其中<div id=gleft>这里的gleft的样式你自己定义下就OK了

img 不要用浮动

简单点的做法就是 把 img 也设置为 position:absolutetop:0width:100%height:100%

left先不设置 然后用js判断有几个 img 给个循环 js代码大概如下：

//js部分

for(var i = 0  i < img.length  i++){

    //动态设置img的left

    //js

    img.style.left = (i*200)+"px"

}

//补充： 在循环结束后 要设置 #1的width属性为 img.length*200

之后的轮播可以 就改变 #1这个div的 left 属性 每次都是 一张图片的大小 200px 当然应该设置的是 -200px

最好是可以给一个计数器， 现在显示的是第几张图片，再判断如果是最后一张 下一次轮播就播放第一张 也就是 #1 的left = 0

如果不太明白 可以设置 #k的overflow:auto 来看效果。

做了个例子给你参考一下：

<!DOCTYPE>

<html>

<head>

    <title></title>

    <style type="text/css">

        #k{width:200px height:280px position:relative border:solid 1px #cccbackground-color:#eee overflow:hidden}

        #img_box{position:absolute top:0left:0}

        #img_box img{width:200pxheight:280px position:absolute top:0}

    </style>

    <script type="text/javascript">

        function Onload() {

            var imgs = document.getElementsByTagName("img")

            img_box.style.width = (imgs.length * 200) + "px"

            for (var i = 0 i < imgs.length i++) {

                imgs[i].style.left = (i * 200) + "px"

            }

        }

    </script>

</head>

<body onload="Onload()">

    <div id="k">

        <div id="img_box" class="a">

            <img src="" alt="图片1" style="background-color:Red" />

            <img src="" alt="图片2" style="background-color:Blue" />

            <img src="" alt="图片3" style="background-color:Green" />

            <img src="" alt="图片4" style="background-color:Yellow" />

        </div>

    </div>

</body>

</html>