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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
javascript 常用方法总结
Jun 03 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
浅析JavaScript动画
Jun 10 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
Vue异步加载about组件
Oct 31 Javascript
优雅的处理vue项目异常实战记录
Jun 05 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
XENON基于JSON变种
2010/07/27 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
深入了解Python enumerate和zip
2020/07/16 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
车间主管岗位职责
2013/11/14 职场文书
施工安全协议书
2013/12/11 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
放假通知
2015/04/14 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python