单个滚动

来源：互联网发布：java 防sql注入代码编辑：程序博客网时间：2024/05/09 16:13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
div,ul,li,p,form{list-style-type: none;}
body{font-size:12px;color:#666;max-width: 100%;background:#eee;font-family: "Microsoft YaHei";}
.joinlist{width:1200px;margin:0 auto;position:relative;}
.joinbox{width:1220px;height:281px;overflow:hidden;}
.joinlist ul{width:100%;height:281px;display:table;overflow:hidden;float:left;}
.joinlist ul li{width:285px;margin-right:20px;float:left;background:#fff;}
.joinlist ul li .sjpic{display:block;width:100%;height:181px; overflow:hidden;margin-bottom:10px;}
.joinlist ul li .sjpic img{width:285px;height:181px;}
.joinlist ul li .sjname{display:block;width:100%; box-sizing:border-box;padding:0 10px;height:50px;line-height:50px;text-align:center;font-size:18px;color:#333;border-bottom:1px solid #eee;white-space: nowrap;text-overflow: ellipsis;overflow:hidden;}
.joinlist ul li .sjname:hover{color:#fd4146;}
.joinlist ul li .address{color:#666;font-size:14px;text-align:center;}
.joinlist ul li .address span{color:#fd4146;padding-right:8px;font-size:22px;line-height:40px;}
.joinlist .left_btn{position:absolute;top:50%;margin-top:-25px;left:0;}
.joinlist .right_btn{position:absolute;top:50%;margin-top:-25px;right:0;}
.shuaxin{cursor:pointer;text-align:center;color:#333;font-size:18px;}

.navIndex{display:table;margin:20px auto;}
.navIndex li{float:left;width:10px;height:10px;border-radius:50%;background:#d3d3d3;margin-right:10px;}
.navIndex li:last-child{margin-right:0;}
.navIndex li.active{background:#C00;}
</style>
</head>

<body>
<div class="joinlist">
<div class="joinbox">
<ul>
<li>
<a href="" class="sjpic"><img src="images/0002.png"></a>
<a href="" class="sjname">1济南舜和国际酒店</a>
<div class="address"><span class="accicon"></span>商店地址: 山东省济南市历下区</div>
</li>
<li>
<a href="" class="sjpic"><img src="images/0002.png"></a>
<a href="" class="sjname">2济南舜和国际酒店</a>
<div class="address"><span class="accicon"></span>商店地址: 山东省济南市历下区</div>
</li>
<li>
<a href="" class="sjpic"><img src="images/0002.png"></a>
<a href="" class="sjname">3济南舜和国际酒店</a>
<div class="address"><span class="accicon"></span>商店地址: 山东省济南市历下区</div>
</li>
<li>
<a href="" class="sjpic"><img src="images/0002.png"></a>
<a href="" class="sjname">4济南舜和国际酒店</a>
<div class="address"><span class="accicon"></span>商店地址: 山东省济南市历下区</div>
</li>
<li>
<a href="" class="sjpic"><img src="images/0002.png"></a>
<a href="" class="sjname">5济南舜和国际酒店</a>
<div class="address"><span class="accicon"></span>商店地址: 山东省济南市历下区</div>
</li>
<li>
<a href="" class="sjpic"><img src="images/0002.png"></a>
<a href="" class="sjname">6济南舜和国际酒店</a>
<div class="address"><span class="accicon"></span>商店地址: 山东省济南市历下区</div>
</li>
<li>
<a href="" class="sjpic"><img src="images/0002.png"></a>
<a href="" class="sjname">7济南舜和国际酒店</a>
<div class="address"><span class="accicon"></span>商店地址: 山东省济南市历下区</div>
</li>
</ul>
</div>

<a href="javascript:;" id="left_btn" class="left_btn"><img src="images/left_btn.png"></a>
<a href="javascript:;" id="right_btn" class="right_btn"><img src="images/right_btn.png"></a>
</div>

<br/><br/>
<script>
$(function(){
var len = $('.joinbox ul li').length;
var liwid = $('.joinbox ul li').outerWidth()+20;
var wid = 305*len+'px';
var page=0;//定义在哪一页page
$('.joinbox ul').css({width:wid});
if(len > 4){//li的数量比4个多时才滚动
var timer = setInterval(goto,3000);
$('.joinlist').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(goto,3000);
});
$('#left_btn').click(function(){
goto();
});
$('#right_btn').click(function(){
if(page > 0){
page--;
$('.joinbox ul').stop().animate({marginLeft:-liwid*page},500);
}else{
page=len-4;
$('.joinbox ul').stop().animate({marginLeft:-liwid*page},500);
}
});
}
function goto(){
if(page < len-4){
page++;
$('.joinbox ul').stop().animate({marginLeft:-liwid*page},500);
}else{
page=0;
$('.joinbox ul').stop().animate({marginLeft:-liwid*page},500);
}
}

})
</script>
</body>
</html>

0 0