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 $.getJSON()跨域请求
Dec 21 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
Mysql的常用命令
2006/10/09 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
用javascript实现自定义标签
2007/05/08 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
实用自动化运维Python脚本分享
2018/06/04 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
三年级语文教学反思
2014/02/01 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
爱国演讲稿400字
2014/05/07 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
绵山导游词
2015/02/05 职场文书
校本研修个人总结
2015/02/28 职场文书
任命书标准格式
2015/03/02 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python