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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JSON相关知识汇总
Jul 03 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php实现两个数组相加的方法
2015/02/17 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
超实用的 30 段 Python 案例
2019/10/10 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python