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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
浅析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
使用phpQuery采集网页的方法
2013/11/13 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
护士自我鉴定怎么写
2014/02/07 职场文书
入党自我鉴定
2014/03/25 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
办公用品质量保证书
2015/05/11 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android