因此说,你的问题有一定的歧义的。
css3还有一种方法可以实现滚动。就是使用过度效果(transition),他也可以实现滚动的效果。而且,个人感觉比较符合你的意思。
其具体的做法是,给超链接滑过状态一个图片属性,如:
li a img {margin-top:0px}
li a:hover img {margin-top:-20px}
li a img {-webkit-transition: margin-top 0.5s}/*注意这里的hack,照顾多个浏览器*/
这样,鼠标滑上图片,图片就会动画向上滑动20像素,鼠标离开,又滑下来。
再扯下严格意义的【动态滚动的图片】,一般的解释是一组图片可以在某个区域内动画滑动。注意是一组。css通常不具有处理多组图片(也有css模拟动画帧的效果的)的效果。动态滚动图片常见的有2种,一种是可控制的滚动列表,一种是自动无限循环滚动。通常用来作为滚动新闻、组图或相册(风采)使用。
简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红、绿、蓝)的效果。
不能发视频,截图来代替吧
1.显示 轮播图1(实际轮播的第2个元素li)
2.显示 轮播图2(实际轮播的第3个元素li)
3.显示 轮播图3(实际轮播的第4个元素li)
4.显示 轮播图1(实际轮播的第5个元素li,之后会紧跟着重复以上动作)
<!--下面是向左滚动代码--><div id="colee_left" style="overflow:hiddenwidth:500px"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="colee_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><p><img src=" http://www.120shenyan.com/1.jpg"></p></td><td><p><img src=" http://do.faqshen.com/1.jpg"></p></td><td><p><img src=" http://www.shenjiayuan.com/1.jpg"></p></td><td><p><img src=" http://js.alixixi.com/img/201108/1.jpg"></p></td><td><p><img src=" http://js.alixixi.com/img/201108/1.jpg"></p></td><td><p><img src=" http://js.alixixi.com/img/201108/1.jpg"></p></td><td><p><img src=" http://js.alixixi.com/img/201108/1.jpg"></p></td></tr></table></td><td id="colee_left2" valign="top"></td></tr></table></div><script>//使用div时,请保证colee_left2与colee_left1是在同一行上. var speed=30//速度数值越大速度越慢 var colee_left2=document.getElementById("colee_left2")var colee_left1=document.getElementById("colee_left1")var colee_left=document.getElementById("colee_left")colee_left2.innerHTML=colee_left1.innerHTML function Marquee3(){ if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度 else{ colee_left.scrollLeft++ } } var MyMar3=setInterval(Marquee3,speed) colee_left.onmouseover=function() {clearInterval(MyMar3)} colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} </script>求采纳