您的位置：首页 > Web前端 > JQuery

JQuery的图片的切换和自动轮播

2017-10-10 19:25 323 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
.clear:after{
content: "\200B";
display: block;
width: 0;
height: 0;
clear: both;
}
ul{
width: 820px;
margin: 200px auto 50px;
}
img{
display: block;
width: 100%;
height: 100%;
}
li{
list-style: none;
width: 256px;
height: 144px;
float: left;
}
li:nth-child(2){
width: 300px;
height: 180px;
margin-top: -20px;
}
</style>
</head>
<body>
<ul class="clear">
<li><img src="3.jpg"></li>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
</ul>
<button>上一个</button>
<button>下一个</button>
<!--<script>
var timmer;
function run(){
timmer=setInterval(function(){
$("ul li").eq(0).appendTo($("ul"));
},1000);
}
run();
$("button").eq(1).click(function(){
clearInterval(timmer);
$("ul li").eq(0).appendTo($("ul"));
setTimeout(function(){
run();
},2000)

});
$("button").eq(0).click(function(){
clearInterval(timmer);
$("ul li:last-child").prependTo($("ul"));
setTimeout(function(){
run();
},2000)
});
</script>-->
<script>
var timmer;
function run(){
timmer=setInterval(function(){
$("ul li:first-child").appendTo($("ul"));
},1000);
}
clearInterval(timmer);
run();
$("button").eq(1).click(function(){
clearInterval(timmer);
$("ul li:first-child").appendTo($("ul"));
clearInterval(timmer);
run();
});
$("button").eq(0).click(function(){
clearInterval(timmer);
$("ul li:last-child").prependTo($("ul"));
clearInterval(timmer);
run();
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航