代码:
<title></title><style>
body{
margin:0
padding:0
background-color:transparent
}
div{
width:350px
overflow:hidden
}
table img{
width:100px
height:100px
}
</style>
</head>
<body>
<div id="picScroll">
<table>
<tr>
<td><a><img src="../pic/1.jpg" /></a></td>
<td><a><img src="../pic/2.jpg"></a></td>
<td><a><img src="../pic/3.jpg"></a></td>
<td><a><img src="../pic/4.jpg"></a></td>
<td><a><img src="../pic/5.jpg"></a></td>
</tr>
</table>
</div>
</body>
</html>
<script>
var target = $('#picScroll')
var left = 0
var speed = 30
function Marqeen() {
if (target[0].offsetWidth <= left) {
left -= target[0].offsetWidth
}
else {
left++
}
target.scrollLeft(left)
}
$(function () {
var marQueen = window.setInterval(Marqeen, speed)
target.mouseover(function () {
clearInterval(marQueen)
})
target.mouseout(function () {
marQueen = window.setInterval(Marqeen, speed)
})
})
</script>
#box1 div:hover{animation-play-state: paused
}
animation--play-state属性指定动画是否正在运行或已暂停。
语法: animation-play-state: paused|running
paused 指定暂停动画
running 指定正在运行的动画
如果你是用一个比较成熟的框架的话,排除框架错误后,只剩下一个就是CSS写的不正确。好好查查CSS写的是不是和你下载下来的这个框架的CSS写的一样,再查查HTML是不是和原版一样。