首页
所有分类
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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
jQuery的学习步骤
Feb 23 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
JavaScript获取当前url路径过程解析
Dec 27 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
指针(1) 切片(1) 结构体(1) 微信小程序(9) random(1) Slice(1) Pillow(2) map(4) vue-esign(1) WeUI(1)
You might like
黑夜路人出的几道php笔试题
2009/08/04 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
俄罗斯天然和有机产品、健康生活网上商店：Fitomarket.ru
2020/10/09 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL