效果:
jQuery轮播图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{padding: 0px;margin: 0px;list-style: none;}
#box{width: 800px;height:150px;border: 1px solid red; overflow: hidden;margin: 5px auto;}
#sente{width:1600px;height:150px;}
#sente li img{width: 200px;height: 150px;float: left;}
</style>
<script src="../js/jquery-3.1.1.js"></script>
<script>
$(function(){
$("ul").append($("li").clone())
function change(){
if($("#box").scrollLeft()<$("#box").width()){
$("#box").scrollLeft($("#box").scrollLeft()+1);
}else{
$("#box").scrollLeft(0)
}
}
var intvar=setInterval(change,10)
$("#box").hover(function(){
if(intvar!=null){
clearInterval(intvar)
intvar=null;
}
},function(){
if(intvar==null){
intvar=setInterval(change,10)
}
})
})
</script>
</head>
<body>
<div id="box">
<ul id="sente">
<li><img src="../img/spring.jpg" alt="" /></li>
<li><img src="../img/summer.jpg" alt="" /></li>
<li><img src="../img/autumn.jpg" alt="" /></li>
<li><img src="../img/winter.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
