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

2019-11-19 18:17:12

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

上一篇：js实现的xml对象转json功能示例

下一篇：浅析BootStrap中Modal（模态框）使用心得