多种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+的都没问题 。

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
js 图片等比例缩放代码
May 13 Javascript
Date对象格式化函数代码
Jul 17 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
三种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
You might like
什么是MVC,好东西啊
2007/05/03 PHP
PHP模块化安装教程
2016/06/01 PHP
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python使用matplotlib画饼状图
2018/09/25 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
python如何调用java类
2020/07/05 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
个人承诺书格式
2014/06/03 职场文书
施工安全标语
2014/06/07 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
四大名著读书笔记
2015/06/25 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫