<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片單行向上滾動(dòng)</title>
css片段
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
#app{
position: relative;
width: 600px;
height: 170px;
border:1px solid red;
margin:200px auto;
overflow: hidden;
}
img{
width: 100%;
}
a{
position: absolute;
top: 50%;
margin-top: -20px;
width: 60px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #333;
color: #eee;
opacity: 0;
}
.pageup{
left: 0;
}
.pagedown{
right: 0;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li><img src="images/11784_sjvz_6183.jpg" alt=""></li>
<li><img src="images/11975_9qds_7354.jpg
" alt=""></li>
<li><img src="images/12316_83da_5472.jpg" alt=""></li>
//圖片會(huì)有縮放的感覺
</ul>
<a href="###" class="pageup">上一頁</a>
<a href="###" class="pagedown">下一頁</a>
</div>
<script src="js/jquery.1.11.3.min.js"></script>
<script>
var t;
function slider(){
$("ul").animate({
"margin-top":"-170px"
},600,function(){
$("li").eq(0).appendTo($(this));
$(this).css("margin-top",0)
})
}
function move(){
t = setInterval(function(){
slider();
},2000)
}
move();
$("#app")
.on("mouseenter",function(){
clearInterval(t)
$("a").animate({
"opacity":1
},600)
})
.on("mouseleave",function(){
move();
$("a").animate({
"opacity":0
},600)
})
$(".pageup")
.on("click",function(){
slider();
})
$(".pagedown")
.on("click",function(){
$("li").eq(2).prependTo($("ul"));
$("ul").css("margin-top","-170px")
.animate({
"margin-top":"0"
},600)
})
</script>
</body>
</html>
