这几天由于公司项目紧，需要上一个新的版本，也中断了在简书的分享。今天给大家介绍一个也是项目中常见的需求——横向列表---点击左右滚动实现。
1.我们还是先看效果图
pic1.png
pic2.png
如图，点击左右的箭头都可以实现文字、图片轮播。
2.案列展示
- 文字滚动
<div class="fr JQ-slide clearfix">
<div class="JQ-slide-nav"><a class="prev" href="javascript:void(0);">‹</a><a class="next" href="javascript:void(0);">›</a></div>
<ul class="JQ-slide-content textList clearfix">
<li>
<a href="#" class="txt">舍1<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">淑女装2<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">大嘴猴3<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">运动裤4<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">蕾丝花边5<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">韩都衣舍6<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">淑女装7<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">大嘴猴8<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">舍9<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">淑女装10<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">大嘴猴11<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">运动裤12<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">运动裤13<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">蕾丝花边14<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">韩都衣舍15<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">淑女装16<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">大嘴猴17<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">舍18<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">淑女装19<span class="dot">·</span></a>
</li>
<li>
<a href="#" class="txt">大嘴猴20</a>
</li>
</ul>
</div>
</div>
对应的js:
/* 用按钮控制文字左右滚动 */
$(".JQ-slide").Slide({
effect:"scroolLoop",
autoPlay:false,
speed:"normal",
timer:3000,
steps:2,
width : 1090
});
对应的css:
.textList li{float: left;display: inline;}
.JQ-slide{position: relative;}
.JQ-slide .prev{position: absolute;left: -20px;font-size: 20px;}
.JQ-slide .next{position: absolute;right: 10px;font-size: 20px;}
.textList{height: 40px;overflow: hidden;}
.textList .dot{margin: 0 10px;}
- 图片滚动
<div class="each-good-goods">
<img src="../../../resource/images/public/test.png" alt="组好货主图" class="show-pic">
<div class="each-bottom">
<!--组货轮播-->
<div class="goods-slide goods-slide-1 clearfix">
<div class="goods-slide-nav"><a class="prev" href="javascript:void(0);">‹</a><a class="next" href="javascript:void(0);">›</a></div>
<ul class="goods-slide-content imgList clearfix">
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test-img-goods.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test-img.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/role-pic-r.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/role-pic-r.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/icons.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/role-pic-r.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/icons.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
<li><a href="javascript:void(0);" class="txt"><img src="../../../resource/images/public/test.png" alt=""></a></li>
</ul>
</div>
<!--end -->
<!--组货轮播文字说明-->
<div class="goods-text">
今冬卖爆掉的好货
</div>
<!--end -->
</div>
</div>
对应的js:
$(".goods-slide-"+i).Slide({
effect:"scroolLoop",
autoPlay:false,
speed:"normal",
timer:3000,
steps:1,
claNav:'goods-slide-nav', //左右按钮的外层容器类名
claCon:'goods-slide-content' //包裹子项的ul标签的类名
});
- 第2个例子比第一个多了最后2个子项的配置，主要是为了解决插件默认的两个类名：JQ-slide-nav JQ-slide-content 不灵活的缺点;
- 第一个列子也定宽，第二个列子中未定宽，是因为我们用的插件，容器的宽度是这么算出来的：容器内元素的数量容器第一个子元素的宽度， 但是我们常常子元素的宽度是不固定的，比如我们的文字滚动~ 所以我手动指定了整个容器的宽度
上面的列子，只写上面的js代码肯定是不可以的，还需要依赖jQuery,以及另一个一个js文件，大家可以点击此处下载 ( PS:注意 容器都需要定高，然后溢出隐藏。)
好了就介绍到这里了，大家快动手尝试，应用到自己项目里吧~
