首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

多种JQuery循环滚动文字图片效果代码

Posted in Javascript onJune 23, 2020

自己模仿JQ插件的写法写了一个循环滚动列表插件，支持自定义上、下、左、右四个方向，支持平滑滚动或者间断滚动两种方式，都是通过参数设置。JQ里面有些重复的地方，暂时没想到更好的方法去精简。不过效果还是可以的，如下（效果图上传后都加速了，实际效果比这个要慢很多）：

多种JQuery循环滚动文字图片效果代码

html代码如下：

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>循环滚动列表</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/autoScroll.js"></script>
<script>
 $(function(){
 //下面是调用语句，以ID名区分

 $("#autoScroll01").autoScroll({
 direction: 'left',  //滚动方向，'up'、'down'、'left'、'right'，*必须参数
 interval: 40,   //滚动间隔，单位'ms'，一定要大于'滚动速度'，*必须参数
 speed: 10,   //滚动完成耗时，单位'ms'，一定要小于'滚动间隔'，*必须参数
 distance: 3,   //单次滚动距离，单位'px'，*必须参数 
 liWidth: 144,   //单个li的盒模型高度&宽度(包括margin值。左右滚动只有liWidth参数，上下滚动只有liHeight参数)，*必须参数
 showNum: 6   //显示几个li，父级高会自适应，但不要超过最大个数，*必须参数 
 });

 $("#autoScroll02").autoScroll({
 direction: 'up',   
 interval: 50,   //interval、speed、distance都很小时，就形成了平滑滚动现象。
 speed: 10,   
 distance: 1,   
 liHeight: 30,     
 showNum: 4   
 });

 $("#autoScroll03").autoScroll({
 direction: 'down',  //向下滚动
 interval: 2000,   //2秒滚动一次
 speed: 600,   //滚动耗时0.6秒（所以必须2秒内滚完，以免没滚完就执行下一次滚动了）
 distance: 40,   //一次滚动40px
 liHeight: 40,   //单个的li的盒模型高度是40px（上下滚动li没有margin跟padding值）
 showNum: 3   //容器里显示3个li标签
 });

 $("#autoScroll04").autoScroll({
 direction: 'right',
 interval: 2500,   //interval、speed、distance都很大时，就形成了间歇性滚动现象。
 speed: 800,
 distance: 288,   
 liWidth: 144,   //左右滚动时，liWidth要算上margin值，注意盒模型
 showNum: 5   
 });

 });
</script>
</head>
<body>
<!-- wrap和boxs box0*这个div非必需,用于布局而已 --> 
<div class="wrap">
 <!-- 布局必须结构为：外层容器id，里面是 ul 跟 li -->
 <div class="boxs box01">
 <div class="autoBox" id="autoScroll01">
 <ul class="clearfix">
 <li><a href="#"><img src="images/img01.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img02.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img03.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img04.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img05.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img06.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img07.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img08.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img09.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img10.jpg" alt=""></a></li>
 </ul>
 </div>
 </div>
 <!--第二个案例 保持结构不变，id不同就可以复用多个-->
 <div class="boxs box02">
 <div class="autoBox" id="autoScroll02">
 <ul>
 <li><a href="#">1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 </ul>
 </div>
 </div>
 <div class="boxs box03">
 <div class="autoBox" id="autoScroll03">
 <ul>
 <li><a href="#">1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 </ul>
 </div>
 </div>
 <div class="clear"></div>
 <div class="boxs box04">
 <div class="autoBox" id="autoScroll04">
 <ul class="clearfix">
 <li><a href="#"><img src="images/img01.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img02.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img03.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img04.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img05.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img06.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img07.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img08.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img09.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img10.jpg" alt=""></a></li>
 </ul>
 </div>
 </div>
</div>
</body>
</html>

css样式如下：

@charset "utf-8";
/* 简单reset */
body, ul, li {
 margin: 0;
 padding: 0;
}
body {
 font: 14px/24px Microsoft YaHei;
 color: #333;
}
ul { list-style: none; }
a {
 color: #333;
 outline: none;
 text-decoration: none;
}
a:hover { color: #2986dd; }
img { border: none; }
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
.clear {
 display: block;
 clear: both;
 height: 0;
 font-size: 0;
 line-height: 0;
 content: ".";
 overflow: hidden;
}
.wrap {
 width: 900px;
 padding-top: 30px;
 margin: 0 auto;
}
.boxs {
 padding: 15px;
 margin: 0 auto 30px;
 background-color: #e4fbff;
}
.box01 { width: 870px; }
.box02 {
 float: left;
 width: 400px;
}
.box03 {
 float: right;
 width: 400px;
}
.box04 { width: 720px; }
/* 具体样式 ---------- */
/* 通用必需样式 */ /* PS：有些重要样式在js里先写好了，下面id容器、ul和li标签的样式比较重要 */ 
.autoBox {
 position: relative;
 margin: 0 auto;
 overflow: hidden;
}
.autoBox ul {
 position: absolute;
 list-style: none;
 z-index: 2;
}
/* 第一、四个列表 */ /* PS：左右滚动型列表需要css定义高度，li标签可以有margin值 */
#autoScroll01, #autoScroll04 {
 width: auto;
 height: 174px;
}
#autoScroll01 ul li, #autoScroll04 ul li {
 float: left;
 width: 128px;
 height: 168px;
 padding: 3px;
 margin: 0 5px;
 _display: inline;
}
#autoScroll01 li a, #autoScroll04 li a {
 display: block;
 padding: 3px;
 border: 1px solid #dbdbdb;
 box-shadow: 0 0 3px rgba(170, 223, 252, 0.5);
}
#autoScroll01 li a:hover, #autoScroll04 li a:hover {
 border-color: #71ddff;
 box-shadow: 0 0 3px rgba(77, 185, 245, .90);
}
#autoScroll01 li img, #autoScroll04 li img {
 display: block;
 width: 120px;
 height: 160px;
}
/* 第二、三个列表 */ /* PS：上下滚动型列表需要css定义宽度，li标签尽量不要设置margin值 */
#autoScroll02, #autoScroll03 {
 width: 100%;
 height: auto;
}
#autoScroll02 ul li {
 height: 30px;
 line-height: 30px;
 overflow: hidden;
}
#autoScroll03 ul li {
 height: 40px;
 line-height: 40px;
 overflow: hidden;
}
#autoScroll02 li a, #autoScroll03 li a {
 display: block;
 width: 100%;
 height: 24px;
 line-height: 24px;
 margin: 3px 0;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
}
#autoScroll03 li a { margin: 8px 0; }

js代码如下：

/** 
 * Name : 循环滚动列表 
 **/
 (function(jQuery){
 $.fn.autoScroll = function (o) {
 o = $.extend({     //设置默认参数 
  direction: 'left',
  interval: null,
  speed: null,
  distance: null,    
  liWidth: null,
  liHeight: null,     
  showNum: null
 },o || {});
 return this.each(function(){   //回调开始
  var $ts = $(this),
  $ul = $ts.children("ul"),
  $li = $ul.children("li"),
  len = $li.length;
  if (o.direction == 'up' || o.direction == 'down' ){  //根据类型设置css
  $ts.css({ "width": "100%", "height": o.showNum * o.liHeight });
  $ul.css({ "width": "100%", "height": len * o.liHeight });
  $li.css({ "float": "none", "width": "100%", "height": o.liHeight, "margin": 0,"padding": 0 });
  };  
  if (o.direction == 'left' || o.direction == 'right' ){ //其实也可以在css里写好
  $ts.css({ "width": o.showNum * o.liWidth });
  $ul.css({ "width": len * o.liWidth });
  $li.css({ "float": "left" });
  };
  switch (o.direction){     //分四种情况，进行事件调用
  case 'left': sroLeft();
  break;
  case 'right':sroRight();
  break;
  case 'up': sroUp();
  break;
  case 'down': sroDown();
  break; 
  };
  function sroLeft(){      //向左滚动事件
  $ul.css("left", 0); 
  var left;
  function leftMoving(){
   var dis = -o.distance,
   dif = -o.liWidth * (len - o.showNum);
   left = parseFloat($ul.css("left"));
   if (left <= dif){
   $ul.css("left",0);
   left = 0;
   $ul.delay(o.interval);
   };
   var ltDis = left + dis;
   if(ltDis <= dif){
   ltDis = dif;
   };
   $ul.animate({"left":ltDis+"px"}, o.speed);
  };
  $ul.hover(      //鼠标移上、移下的阻止与恢复滚动
   function(){
   clearInterval(fnLeft);
   },
   function(){
   fnLeft = setInterval(function(){leftMoving()}, o.interval);
   }
  );
  fnLeft = setInterval(function(){leftMoving()}, o.interval);
  };
  function sroRight(){     //向右滚动事件
  $ul.css("right", 0); 
  var right;
  function rightMoving(){
   var dis = -o.distance,
   dif = -o.liWidth * (len - o.showNum);
   right = parseFloat($ul.css("right"));
   if (right <= dif){
   $ul.css("right",0);
   right = 0;
   $ul.delay(o.interval);
   };
   var rtDis = right + dis;
   if(rtDis <= dif){
   rtDis = dif;
   };
   $ul.animate({"right":rtDis+"px"}, o.speed);
  };
  $ul.hover(
   function(){
   clearInterval(fnRight);
   },
   function(){
   fnRight = setInterval(function(){rightMoving()}, o.interval);
   }
  );
  fnRight = setInterval(function(){rightMoving()}, o.interval);
  };
  function sroUp(){      //向上滚动事件
  $ul.css("top", 0);
  var top;
  function upMoving(){
   var dis = -o.distance,
   dif = -o.liHeight * (len - o.showNum);
   top = parseFloat($ul.css("top"));
   if (top <= dif){
   $ul.css("top",0);
   top = 0;
   $ul.delay(o.interval);
   };
   var tpDis = top + dis;
   if(tpDis <= dif){
   tpDis = dif;
   };
   $ul.animate({"top":tpDis+"px"}, o.speed);
  };
  $ul.hover(
   function(){
   clearInterval(fnUp);
   },
   function(){
   fnUp = setInterval(function(){upMoving()}, o.interval);
   }
  );
  fnUp = setInterval(function(){upMoving()}, o.interval);
  };
  function sroDown(){      //向下滚动事件
  $ul.css("bottom",0);
  var bottom;
  function downMoving(){
   var dis = -o.distance,
   dif = -o.liHeight * (len - o.showNum);
   bottom = parseFloat($ul.css("bottom"));
   if (bottom <= dif){
   $ul.css("bottom",0);
   bottom = 0;
   $ul.delay(o.interval);
   };
   var bmDis = bottom + dis;
   if(bmDis <= dif){
   bmDis = dif;
   };
   $ul.animate({"bottom":bmDis+"px"}, o.speed);
  };
  $ul.hover(
   function(){
   clearInterval(fnDown);
   },
   function(){
   fnDown = setInterval(function(){downMoving()}, o.interval);
   }
  );
  fnDown = setInterval(function(){downMoving()}, o.interval);
  };
 });
 };
})(jQuery);

兼容到IE6+，jq库用1.7+的都没问题 。

多种JQuery循环滚动文字图片效果代码

- Author -

子纯不语

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
vuejs数据超出单行显示更多，点击展开剩余数据实例
May 05 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
三种AngularJS中获取数据源的方式
Feb 02 #Javascript
原生JS实现拖拽图片效果
Aug 27 #Javascript
基于jquery实现下拉框美化特效
Feb 02 #Javascript
AngularJS自动表单验证
Feb 01 #Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 #Javascript
AngularJS手动表单验证
Feb 01 #Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 #Javascript
并发(8) frozenset(1) Xpath(1) set(1) Counter(1) most_common(1) pip(1) SingleFlight(2) 爬虫(2) 字典(3)
You might like
PHP之COOKIE支持详解
2010/09/20 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
js尾调用优化的实现
2019/05/23 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
vue（2.x，3.0）配置跨域代理
2019/11/27 Javascript
vue3.0 上手体验
2020/09/21 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
python time模块用法实例详解
2014/09/11 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
如何基于python操作excel并获取内容
2019/12/24 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
木马的传播途径主要有哪些
2016/04/08 面试题
物业客服专员岗位职责
2013/11/30 职场文书
会计职业生涯规划书
2014/01/13 职场文书
京剧自荐信
2014/01/26 职场文书
给上级领导的感谢信
2015/01/22 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers