单个滚动

原创 2016年08月29日 11:38:48
<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

广告 滚动条 单个html

  • 2017年07月18日 13:02
  • 3KB
  • 下载

8只数码管滚动显示单个数字

  • 2013年08月07日 13:28
  • 36KB
  • 下载

教你怎么在单个屏幕上所有服务器的日志实时滚动着显示

转载:http://www.cnblogs.com/yiwenshengmei/p/use_logstash_collect_log.html 1. 安装Java 下载JDK压缩包。 一般解压到...

8只数码管滚动显示单个数字

  • 2011年05月06日 12:11
  • 28KB
  • 下载

iOS中UICollectionView实现单个cell滚动翻页并放大cell

iOS中UICollectionView实现单个cell滚动翻页并放大cellUICollectionView 在项目中的使用是非常常见的,也是非常厉害的,这个要是精通熟练了你就牛了。 这里分享一个...

iOS 利用UIScrollView实现对单个试图缩放并可以滚动

这个例子实现滚动视图,并可以对单个视图缩放 MyScroolView.h #import @interface MyScroolView : UIScrollView @property (st...
  • qqMCY
  • qqMCY
  • 2014年03月19日 23:01
  • 1645

springboot 单个input实现多图片上传

  • 2017年11月13日 01:48
  • 293KB
  • 下载

有向图中单个源点到终点的最短路径--Dijkstra算法与实现

1、Dijkstra算法能够解决有向图中单个源点到另一终点的最短路径问题,它的算法过程如下: 1)用矩阵graph[]N[N](N为图中节点个数)表示带权的有向图G。若图中两个节点vi和vj是连通的...
  • vgxpm
  • vgxpm
  • 2015年08月28日 21:44
  • 1322
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:单个滚动
举报原因:
原因补充:

(最多只允许输入30个字)