level 3
dsdyjg
楼主
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
</head>
<style>
*{ margin: 0px; padding: 0px;}
li{ list-style: none;}
.content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; position: relative;}
.content ul{ width: 1020px; height:100px;}
.content ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;}
.prev{position: absolute;left:0px;top:46px;}
.next{position: absolute;right:0px;top:46px;}
</style>
<body>
<div class="content">
<span class="prev"><<</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<span class="next">>></span>
</div>
<script>
var timer=null;
function scrollright(){
$(".content ul").animate({"margin-left":"110px"},function(){
$(".content ul li:eq(0)").appendTo($(".content ul"))
$(".content ul").css({"margin-left":0})
})
}
function scrollleft(){
$(".content ul").animate({"margin-left":"-110px"},function(){
$(".content ul li:eq(0)").appendTo($(".content ul"))
$(".content ul").css({"margin-left":0})
})
}
timer=setInterval(scrollleft,1000)
$(function(){
$(".next").click(function(){
clearInterval(timer);
setInterval(scrollright,1000);
})
$(".prev").click(function(){
clearInterval(timer);
setInterval(scrollleft,1000);
})
$(".content ul").mouseover(function(){
clearInterval(timer);
})
$(".content ul").mouseleave(function(){
timer=setInterval(scrollleft,1000)
})
})
</script>
</body>
</html>
2016年04月12日 07点04分
1
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
</head>
<style>
*{ margin: 0px; padding: 0px;}
li{ list-style: none;}
.content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; position: relative;}
.content ul{ width: 1020px; height:100px;}
.content ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;}
.prev{position: absolute;left:0px;top:46px;}
.next{position: absolute;right:0px;top:46px;}
</style>
<body>
<div class="content">
<span class="prev"><<</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<span class="next">>></span>
</div>
<script>
var timer=null;
function scrollright(){
$(".content ul").animate({"margin-left":"110px"},function(){
$(".content ul li:eq(0)").appendTo($(".content ul"))
$(".content ul").css({"margin-left":0})
})
}
function scrollleft(){
$(".content ul").animate({"margin-left":"-110px"},function(){
$(".content ul li:eq(0)").appendTo($(".content ul"))
$(".content ul").css({"margin-left":0})
})
}
timer=setInterval(scrollleft,1000)
$(function(){
$(".next").click(function(){
clearInterval(timer);
setInterval(scrollright,1000);
})
$(".prev").click(function(){
clearInterval(timer);
setInterval(scrollleft,1000);
})
$(".content ul").mouseover(function(){
clearInterval(timer);
})
$(".content ul").mouseleave(function(){
timer=setInterval(scrollleft,1000)
})
})
</script>
</body>
</html>
