.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; }
JS代码中主要写了两个函数,MoveLeft,MoveRight;
在需要滑动切换的区域,按照示例中的HTML代码排列块级元素,然后调用这两个函数就行;
总体的思路是在需要滑动的区域得有两个Div,一个用于放置页面加载时显示的块级元素,一个是隐藏区域用于放置滑动时切换出来的块级区域。
如果出现滑动卡顿等现象,请调试改动HTML代码中Div的width属性,一般这个属性值是根据块级元素的宽度和边距算出来;
最后为了能在“全国”看到所有的公司,JS是在点击事件触发时动态获取下一个应该显示出来的块级元素的,这里需要用到给div和li添加的两个属性,city_abbr 和 sortNum;
city_abbr用来标识,现在应该显示那个地区的显示区;
sortNum是用来排序的,数值越大,那么就越接近当前时间。