jquery图片或文字连续循环滚动特效[非常详细的教你如何自己动手写代码来实现]及在线实例演示推荐 亲测 原创 收藏

文章标签: 图片特效
  • :
  • 05-24 15:56
  • :
  • 42次
  • :
  • 0条
  • 1赞

简介本文非常详细的讲解在jquery里实现图片或文字的连续循环滚动的方法,及完整的在线实例演示。l

连续循环滚动是我们在网页开发中经常要用到的特效,在jquery里,我们要实现文字或图片的连续循环滚动是非常简单的,本文站长就和大家非常详细的来介绍如何在jquery里实现图片或文字的连续循环滚动,通过本文,可以让你掌握自己动手来写出连续循环滚动的特效代码。


第一步:HTML结构和CSS样式:

<style type="text/css">    
#byc ul li {width:100px;height:80px}  
</style>
<div id="byc" class="mx-auto" style="width:402px;height:80px;overflow:hidden;border:1px solid red">
    <ul class="list-unstyled">
          <li class="border float-left">Lorem ipsum</li>
          <li class="border float-left">Phasellus iaculis</li>
          <li class="border float-left">Nulla volutpat</li>
          <li class="border float-left">Nulla </li>
          <li class="border float-left">volutpat</li>
    </ul>
</div>

结构很简单,div是展示的框架界面,根据自己的网页,设置好宽高,超出的部分隐藏,图片或文字信息全放在ul列表里,CSS样式的话,让li浮动,并且设置好li的宽高就行。


第二步:编写JS代码:

function GunDong(v){
    var $ul=v.find("ul");
    var _w=$ul.find("li").eq(0).outerWidth();
    $ul.width(_w*$ul.find("li").length);
    this.Go=function(){
        $ul.animate({marginLeft:"-"+_w},1000,function(){
          $ul.css({marginLeft:0}).find("li:first").appendTo($ul);
        });
    };
    this.autoScroll=function(){
        var self=this;
        var g=setInterval(self.Go,1500);
        $ul.mouseover(function(){
            clearInterval(g);
        }).mouseout(function(){
            g=setInterval(self.Go,1500);
        });
    }
}

代码很简单,共四个过程:

  1. 更改ul的宽度,这是为了让超出显示范围的图片或文字并排成一排,这样滚动的时候才会“连续性”;

  2. 设置滚动一次的动作函数Go;用jquery里的animate很容易实现,如果要向右滚动,上面代码里改成marginRight;

  3. 通过setInterval来循环调用上面的动作函数Go,实现图片或文字的连续滚动;

  4. 通过jquery里的mouseover和mouseout来设置当鼠标放上去和移开时,停止滚动和继续滚动;


第三步:调用代码并运行:

var a=new GunDong($("#byc"));
a.autoScroll();

好了,关于jquery里图片或文字的连续循环就是这么简单,下面是具体的在线实例演示:

jquery连续滚动在线演示



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 15:50:30