关闭

单个滚动

128人阅读 评论(0) 收藏 举报
分类:
<!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">&#xe60d;</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">&#xe60d;</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">&#xe60d;</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">&#xe60d;</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">&#xe60d;</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">&#xe60d;</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">&#xe60d;</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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6731次
    • 积分:154
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类