Html
    Css
    Js

    
                        
.cooperation{
    margin: 0 auto;
    text-align: center;
}

#icoL{
	float:left;
	margin-top: 24px;
	margin-right: 55px;
	width: 50px;
    height: 88px;
	display: inline-block;
	background: url(http://www.jq22.com/img/cs/300x500-1.png) no-repeat;
}
#icoR{
    margin-right: 20px;
	margin-top: 24px;
	float: right;
	width: 50px;
    height: 88px;
	display: inline-block;
    background: url(http://www.jq22.com/img/cs/300x500-1.png) no-repeat;
}
li{
	list-style:none;	
}
.cooperation ul{
    display:inline-block;
	list-style:none;
	padding-left: 0px;
	background-color:yellow;
}
.cooperation ul li{
    padding:10px 20px 10px 20px;
    display: inline-block;
}

.company_city {
    margin-top: 30px;
    position: relative;
    left: 35%;
    text-align: center;
    font-size: 0;
    overflow: hidden;
}

    .company_city li + li {
        border-left: 0;
    }

.company_city li  {
    float: left;
    width: 85px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #e8e8e8;
    cursor: pointer;
}

.company_city li a{
    color:#666;
}
    .company_city .on {
        color:#f40;
    }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery滑动切换块级元素

JS代码中主要写了两个函数,MoveLeft,MoveRight;

在需要滑动切换的区域,按照示例中的HTML代码排列块级元素,然后调用这两个函数就行;

总体的思路是在需要滑动的区域得有两个Div,一个用于放置页面加载时显示的块级元素,一个是隐藏区域用于放置滑动时切换出来的块级区域。

如果出现滑动卡顿等现象,请调试改动HTML代码中Div的width属性,一般这个属性值是根据块级元素的宽度和边距算出来;

最后为了能在“全国”看到所有的公司,JS是在点击事件触发时动态获取下一个应该显示出来的块级元素的,这里需要用到给div和li添加的两个属性,city_abbr sortNum

city_abbr用来标识,现在应该显示那个地区的显示区;

sortNum是用来排序的,数值越大,那么就越接近当前时间。

0