<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片播放练习</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var left=0;
var dec=2;
// $('#content').html($('#content').html()+$('#content').html());
$('#left').click(function(){
dec=2;
});
$('#right').click(function(){
dec=-2;
});
//这里千万不能带单位 30 ms 带了就运行不了!!!
var timer = setInterval(move,30);
function move(){
//这里千万不能带单位 px 带了就运行不了!!!!
if(left<-800){
left=0;
}
if(left>0){
left=-800;
}
else{left-=dec;}
$('#content').css({left:left});
}
$('#content').mouseover(function(){
clearInterval(timer);
});
$('#content').mouseout(function(){
timer = setInterval(move,30);
// setInterval(move,30);
// 如果用上面这句话,暂停继续暂停继续 会越来越快~~~~!!!!
});
})
</script>
<style type="text/css">
.slide{
width:802px;
height:202px;
border: 1px solid black;
margin-top:50px;
margin-left: 0;
background: #ddd;
position: relative;
overflow: hidden;
}
.content{
width: 1600px;
list-style: none;
padding-left: 0;
margin-top: 0;
position: absolute;
left:0;
}
.content li{
float:left;
height:180px;
width: 190px;
margin-right: 5px;
margin-left: 5px;
margin-top: 10px;
}
.content li img{
height:180px;
width: 190px;
}
</style>
</head>
<body>
<input type="button" name="" value="<<" id='left' class='left'>
<input type="button" name="" value=">>" id='right' class='right'>
<div class="slide" id="slide">
<ul class="content" id="content">
<li><img src="../images/banner01.jpg"></li>
<li><img src="../images/banner02.jpg"></li>
<li><img src="../images/banner03.jpg"></li>
<li><img src="../images/banner04.jpg"></li>
<li><img src="../images/banner05.jpg"></li>
<li><img src="../images/banner06.jpg"></li>
<li><img src="../images/goods_pic.jpg"></li>
<li><img src="../images/adv01.jpg"></li>
</ul>
</div>
</body>
</html>
前端学习随缘记录
最新推荐文章于 2024-09-23 16:36:59 发布