无缝滚动用jquery是如何来实现的

无缝滚动的实现原理:div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出box的。

然后通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制  margin-top;
初始状态时,我们还要进行条件判断,判断是否进行滚动。即:当 ul 长度小于 外层 box 长度时不进行滚动,反之则进行滚动。比如我们公司做的马红旗小儿推拿的项目上就应用到了无缝滚动,这个是用jquery来完成的:

图片1.png

这个的具体写法是这样的:

首先引入juqry

图片2.png

在这里引用了一个插件,专门来控制滚动的,调用的方式如下:

      <script type="text/javascript">
    $(function(){
    imgScroll.rolling({
    name:'gundong1',
    width:'291px' ,
    height:'237px',
    direction:'left',
    speed:11,
    addcss:true
    });
        imgScroll.rolling({
    name:'gundong2',
    width:'291px' ,
    height:'237px',
    direction:'left',
    speed:10,
    addcss:true
    });
    })
    </script>

Name是你的类名,width、height是li的宽度高度,direction是滚动的方向,Speed是滚动的速度

完成上述步骤,无缝滚动就可以实现了。

 

关键词:
返回列表

相关文章

相关案例