html图片向左无缝隙循环滚动代码
用css3实现循环滚动效果:
css:
#wrap{
width: 200px;
height: 150px;
border: 1px solid #000;
position: relative;
margin: 100px auto;
overflow: hidden;
}
#list{
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
animation: move 12s infinite linear;
-webkit-animation: move 12s infinite linear;
width: 500%;
}
#list li {
list-style: none;
width: 200px;
height: 150px;
border: 0;
float: left;
}
@-webkit-keyframes move{
0% {
left: 0;
}
100% {
left: -800px;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: -800px;
}
}
#wrap:hover #list {
-webkit-animation-play-state: paused; /*动画暂停播放*/
}
html:
<div id="wrap">
<ul id="list">
<li><a href="#"><img src="img/1.jpg" border="0" /></a></li>
<li><a href="#"><img src="img/2.jpg" border="0" /></a></li>
<li><a href="#"><img src="img/3.jpg" border="0" /></a></li>
<li><a href="#"><img src="img/4.jpg" border="0" /></a></li>
<li><a href="#"><img src="img/5.jpg" border="0" /></a></li>
</ul>
</div>
扩展资料:
animation(动画) 属性:
语法:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
参数:
1、animation-name:指定要绑定到选择器的关键帧的名称。
2、animation-duration:动画指定需要多少秒或毫秒完成。
3、animation-timing-function:设置动画将如何完成一个周期。
值:
linear:动画从头到尾的速度是相同的。
ease:默认。动画以低速开始,然后加快,在结束前变慢。
ease-in:动画以低速开始。
ease-out:动画以低速结束。
ease-in-out:动画以低速开始和结束。
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4、animation-delay:设置动画在启动前的延迟间隔。
5、animation-iteration-count :定义动画的播放次数。
值:
n:一个数字,定义应该播放多少次动画。
infinite:指定动画应该播放无限次(永远) 。
向左或向右都可以,无缝隙循环滚动,麻烦请给完整代码,5张图片图片大小200*150,最
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.picutre_many img{width:200px; height:150px;}
</style>
</head>
<body>
<div id="list" class=" picutre_many"
style="overflow: hidden; height: 150px; width: 800px; margin: 0 auto;">
<table cellspacing="0" cellpadding="0"
style="width: 680px; border: 0px;">
<tr>
<td id="list1">
<table style="border: 0px;" cellpadding="0" cellspacing="0">
<tr id="pic">
<td><img style="border: 0px;" alt="" src="1.jpg" /></td>
<td><img style="border: 0px;" alt="" src="2.jpg" /></td>
<td><img style="border: 0px;" alt="" src="3.jpg" /></td>
<td><img style="border: 0px;" alt="" src="4.jpg" /></td>
<td><img style="border: 0px;" alt="" src="5.jpg" /></td>
</tr>
</table>
</td>
<td id="list2"></td>
</tr>
</table>
</div>
<script type="text/javascript">
/*图片滚动效果*/
var speedpic = 20;//速度数值越大速度越慢
document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;
function Marqueepic() {
if (document.getElementById("list2").offsetWidth
- document.getElementById("list").scrollLeft <= 0) {
document.getElementById("list").scrollLeft -= document
.getElementById("list1").offsetWidth;
} else {
document.getElementById("list").scrollLeft++;
}
}
var MyMarpic = setInterval(Marqueepic, speedpic);
document.getElementById("list").onmouseover = function() {
clearInterval(MyMarpic);
}
document.getElementById("list").onmouseout = function() {
MyMarpic = setInterval(Marqueepic, speedpic);
}
</script>
</body>
</html>
把图片的src改一下,应该没问题。如果可以的话,40金币拿来吧,哈哈
那你要多少分
首先,你的问题描述我看不懂,其次,你的分低,技术类的东西,一般不是正在做这个的,谁没事帮你做??
报酬起码100吧