<!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>
使用jQuery中prependTo appendTo图片轮播凸出效果
最新推荐文章于 2022-03-31 16:51:53 发布