一款图片无缝滚动的控件

最新推荐文章于 2018-11-15 21:54:59 发布

weixin_33787529

最新推荐文章于 2018-11-15 21:54:59 发布

阅读量68

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：https://my.oschina.net/fight123/blog/707694

版权

2019独角兽企业重金招聘Python工程师标准>>>

图片滚动效果

在应用中要实现图片的滚动，由于对前端也不是很熟悉，所以找了半天，发现一个比较好的控件--jQuery cxScroll ，能够满足我的需求。下面简单介绍下（当然也是从其官方文档上抄的咯）

载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.cxscroll.js"></script>

CSS 样式结构 除必要属性设置外，其他样式均可自行设置。

/* 横向滚动基本样式 */
.cxscroll{}
.cxscroll .box{overflow:hidden;width:600px;}
.cxscroll .list{overflow:hidden;width:9999px;}
.cxscroll .list li{float:left;width:200px;height:100px;}
.cxscroll .prev{}
.cxscroll .next{}

/* 纵向滚动基本样式 */
.cxscroll{}
.cxscroll .box{overflow:hidden;height:300px;}
.cxscroll .list{}
.cxscroll .list li{height:100px;}
.cxscroll .prev{}
.cxscroll .next{}

DOM 结构

<div id="element_id" class="cxscroll">
  <div class="box">
    <ul class="list">
      <li></li>
      <li></li>
      ...
      <li></li>
    </ul>
  </div>
  <!-- 控制按钮会自动创建，可省略 -->
  <a class="prev"></a>
  <a class="next"></a>
</div>

调用 cxScroll

$('#element_id').cxScroll();

参数名称默认值说明 direction 'right' 滚动方向。可设置为："left", "right", "top", "bottom" easing 'swing' 缓动方式 step 1 滚动步长 accel 200 手动滚动速度 (ms)，点击控制按钮滚动的速度。 speed 800 自动滚动速度 (ms) time 4000 自动滚动间隔时间 (ms) auto true 是否自动滚动 hoverLock true 鼠标移入移出锁定。鼠标进入区域内时停止自动轮播，离开后恢复自动轮播（仅在 auto 为 true 时有效） prevBtn true 是否使用 prev 按钮 nextBtn true 是否使用 next 按钮

接口

var Api;
$('#element_id').cxScroll(function(api){
  Api = api;
});
// 或者作为第二个参数传入
$('#element_id').cxScroll({
  minus: true,
  plus: true
}, function(api){
  Api = api;
});

名称说明 play() 开始自动播放 stop() 停止自动播放 prev(speed) 向前滚动。speed 为滚动速度(ms) next(speed) 向后滚动。speed 为滚动速度(ms)

文档地址：http://code.ciaoca.com/jquery/cxScroll/

问题

目前都比较正常，只是在ul 里包含很多图片时，后面一部分显示不出来，就停住了，不知道什么原因

转载于:https://my.oschina.net/fight123/blog/707694