横向列表——点击左右滚动实现

这几天由于公司项目紧，需要上一个新的版本，也中断了在的分享。今天给大家介绍一个也是项目中常见的需求——横向列表---点击左右滚动实现。

1.我们还是先看效果图

pic1.png

pic2.png

如图，点击左右的箭头都可以实现文字、图片轮播。

2.案列展示

• 文字滚动

                
‹›
                

                    

                        舍1·
                    
                    

                        淑女装2·
                    
                    

                        大嘴猴3·
                    
                    

                        运动裤4·
                    
                    

                        蕾丝花边5·
                    
                    

                        韩都衣舍6·
                    
                    

                        淑女装7·
                    
                    

                        大嘴猴8·
                    
                    

                        舍9·
                    
                    

                        淑女装10·
                    
                    

                        大嘴猴11·
                    
                    

                        运动裤12·
                    
                    

                        运动裤13·
                    
                    

                        蕾丝花边14·
                    
                    

                        韩都衣舍15·
                    
                    

                        淑女装16·
                    
                    

                        大嘴猴17·
                    
                    

                        舍18·
                    
                    

                        淑女装19·
                    
                    

                        大嘴猴20
                    
                
            
        

对应的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;}

• 图片滚动

                
                

                    
                    

                        
‹›
                        

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                        
                    
                    

                    
                    

                        今冬卖爆掉的好货
                    
                    
                
            

对应的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:注意 容器都需要定高，然后溢出隐藏。)

好了就介绍到这里了，大家快动手尝试，应用到自己项目里吧~