jQuery实现的无缝广告图片左右滚动功能详解


Posted in Javascript onDecember 24, 2016

本文实例讲述了jQuery实现的无缝广告图片左右滚动功能。分享给大家供大家参考,具体如下:

先是写了一个此功能的jQuery插件,但是一时写不出如何使用鼠标进行滚动方向的切换,于是又写了另一个可以实现切换的版本...

原理:

1.把滚动的内容复制2份放到原内容左右,这样无论向左右滚动都不会出现断掉的情况

2.改变内容样式的left值实现滚动效果,向左或向右滚动一个内容的长度后,还原并继续滚动,这样看起来就像无缝一直滚动的样子了(视觉上的效果,^_^)

3.鼠标放上去则clearInterval,移开后继续setInterval

4.移动效果写成一个方法,切换方向时调用一次即可

<style>
* { margin:0; padding:0;}
ul { list-style:none; margin:0; padding:0;}
img { border:none;}
.bar {
  margin:0 auto;
  width:800px; height:48px; overflow:hidden;
  line-height:48px; border:2px solid #EEE;}
.bar a.a_left,
.bar a.a_right{
  float:left;
  width:11px; height:48px;
  background:url(a_left.png) no-repeat left center;}
.bar a.a_right { float:right; background-image:url(a_right.png);}
.bar_wrap { float:left; position:relative; width:776px; height:48px; white-space:nowrap; overflow:hidden;}
.bar_inner { position:relative; height:48px; line-height:48px; left:0; width:2880px; white-space:nowrap;}
.bar_inner ul { height:48px; overflow:hidden; float:left; width:960px;}
.bar_inner ul li{ float:left;}
.bar_inner ul li a{ padding:0 16px; display:block; height:48px; line-height:48px;}
</style>
<body>
<div class="bar">
  <a href="#" class="a_left"></a>
  <div class="bar_wrap">
  <div class="bar_inner">
    <ul>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
      <li><a href="#" title="" ><img src="pic.png" alt="" /></a></li>
    </ul>  </div>
  </div>
  <a href="#" class="a_right"></a>
</div>
var scrollBar = function(){
  this.step = 14;
  this.speed = 100;
  this.inner = $(".bar_inner");
  this.wrap = $(".bar_wrap");
  this.ini = 0;
  this.pos = "l";
  this.s ;
  }
scrollBar.prototype = {
  check : function(){
    return this.inner.width() < this.wrap.width() ? false : true;
    } ,
  init : function(){
    if( this.check() ){
      this.inner
        .html( this.inner.html() + this.inner.html() + this.inner.html() )
        .css("left",- this.inner.width()/3 + "px");
      }
    },
  run : function(pos){
    if (! this.check()){ return;}
    if( this.ini == 0) {this.init();}
    this.ini = 1;
    this.pos = pos;
    var that = this;
    var f = function(){
      if(that.pos == "l"){
        var l = parseInt( that.inner.css("left") ) - that.step;
        that.inner.css("left",l + "px");
        //console.log(l);
        if ( parseInt(that.inner.css("left")) <= -( that.inner.width()/ 3 * 2) ){
          that.inner.css("left",- that.inner.width() /3 + "px");
          }
        }
      else {
        var l = parseInt( that.inner.css("left") ) + that.step;
        that.inner.css("left",l + "px");
        //console.log( l );
        if( parseInt(that.inner.css("left")) >= 0 ){
          that.inner.css("left", - that.inner.width()/3 + "px");
          }
        }
      }
    if(this.s) {clearInterval(that.s);};
    this.s = setInterval( f ,that.speed);
    that.inner.hover(
      function(){ clearInterval(that.s);},
      function(){clearInterval(that.s); that.s = setInterval( f ,that.speed); }
      )
    }
  }
var s = new scrollBar();
s.run("r");
$(".a_left").mouseover(function(){
  clearInterval( s.s);
  s.run("l");
  })
$(".a_right").mouseover(function(){
     clearInterval( s.s);
  s.run("r");
})

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
document.write的几点使用心得
May 14 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 #Javascript
纯JS实现表单验证实例
Dec 24 #Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 #Javascript
JS绘制微信小程序画布时钟
Dec 24 #Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 #Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 #Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 #Javascript
You might like
PHP中文汉字验证码
2007/04/08 PHP
万能的php分页类
2017/07/06 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
Python切片用法实例教程
2014/09/08 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
python 以16进制打印输出的方法
2018/07/09 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
用Python解数独的方法示例
2019/10/24 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
python默认参数调用方法解析
2020/02/09 Python
keras得到每层的系数方式
2020/06/15 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
请说出以下代码输出什么
2013/08/30 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
放假通知范文
2015/04/14 职场文书
python中的装饰器该如何使用
2021/06/18 Python