关闭

jquery实现图片轮播

标签: jquery
170人阅读 评论(0) 收藏 举报
分类:

利用jquery实现两种轮播效果
轮播一:

<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
     var timer = setInterval(change,2000); //定时器,每2s轮播一次
     var imgs=$("#slide li");              //图片的数组
     var length=imgs.length;              //图片数组的长度
     var index=0;                         //图片索引
     var icons=$("#icons li");   
     var arrows=$("[name='arrow']");       //左右指向标
     var box=$("#box"); 

      imgs.hide();                         
      imgs.eq(index).show();                   //只显示第一张图片
      icons.eq(index).addClass("active");      //激活当前图标
     //对数字标签添加事件
      icons.click(function(){
           index = $(this).index();            //获得索引
           update();
           clearInterval(timer);
           timer=setInterval(change,2000);      //重启定时器
         });

      imgs.mouseover(function(){
           clearInterval(timer);
         }).mouseout(function(){
           timer=setInterval(change,2000);
         });
      box.mouseenter(function(){
         arrows.show();
         }).mouseleave(function(){
         arrows.hide();
     }); 

     arrows.click(function(){
         if($(this).attr("id")=="left"){
              index--;
             }else{
                 index++;
             }

             if(index<0){
                 index=length-1;
             }
             if(index>length-1){
                 index=0;    
             }
           update();
           clearInterval(timer);
           timer=setInterval(change,2000);
         });
     function change(){
           index++;
           if(index==length)
             index=0;
           update();
      }
     function update(){
           imgs.fadeOut(500);
           imgs.eq(index).fadeIn(500);
           icons.removeClass("active");
           icons.eq(index).addClass("active");
         }
  });
</script>

轮播二:

<script src="jquery.js" type="text/javascript"></script>
<script>
 $(document).ready(function(e) {
     var timer = setInterval(changeRight,2000);
     var index=0;
     var box=$("#box"); 
     var icons=$("#icons li");
     var imgs=$("#slide li");
     var len=imgs.length;   
     var arrows=$("[name='arrow']");
     icons.eq(index).addClass("active");      //激活当前图

     icons.click(function(){
           index = $(this).index()+1;            //获得索引
           clearInterval(timer);
           changeLeft();      //重启定时器
         });

     box.mouseenter(function(){
         arrows.show();
         }).mouseleave(function(){

         arrows.hide();
     }); 
        imgs.mouseover(function(){
           clearInterval(timer);
         }).mouseout(function(){
           timer=setInterval(changeRight,2000);
         });

     arrows.click(function(){
              clearInterval(timer);
             if($(this).attr("id")=="left"){
              changeLeft();
             }else{
              changeRight();
             }
         });

        function changeLeft(){
            if(index==0){
            $("#slide").css("left",-2500);
            index=length-1;
            icons.eq(index).addClass("active"); 
        }else{
          index--;  
        }
        $("#slide").animate({"left":-500*index},500);
           icons.removeClass("active");
           icons.eq(index).addClass("active");

        }

        function changeRight(){
        if(index==length){
            $("#slide").css("left",0);
            index=1;
            icons.eq(index).addClass("active"); 
        }else{
            index++;
            }

        $("#slide").animate({"left":-500*index},500);
           icons.removeClass("active");
           if(index==length)
           icons.eq(0).addClass("active");
           else
           icons.eq(index).addClass("active");
        }
});
</script>
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

用jquery实现图片轮播

CSS样式: *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px;...
  • liuxuekai
  • liuxuekai
  • 2016-07-16 18:04
  • 6080

Jquery 图片轮播实现原理总结

以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下。 首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含...
  • dyllove98
  • dyllove98
  • 2013-06-28 20:36
  • 5649

[ jQuery ] jQuery深入之大图轮播原理!

也是用了很久的jQuery. 最近也在写自己的那个小站。对于一些特效还是想弄清一原理。让自己对一些东西有更深入的了解。 说说大图轮播的原理: 1.很多时候使用方法Ul列表去展示。当然这也有一些好处...
  • yangzhihello
  • yangzhihello
  • 2014-02-17 09:48
  • 17606

jquery实现简易图片轮播

  • 2011-12-30 18:21
  • 222KB
  • 下载

jQuery实现图片轮播

  • 2015-03-14 10:05
  • 371KB
  • 下载

jQuery实现的图片轮播

  • 2017-08-25 09:49
  • 123KB
  • 下载

jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。相信很多同学都在各种类型的网站上看过花样百出的轮播效果图,不少同学也想尝试下自己做出来一个,但...
  • dreamsunday
  • dreamsunday
  • 2014-04-21 09:53
  • 14481

jquery实现图片轮播效果

html 部分 css部分 #lunbo{width: 600px;height: 300px;margin: 0 auto;overf...
  • yinkaihui
  • yinkaihui
  • 2016-03-26 23:12
  • 761

JQuery实现图片轮播切换效果--水平切换/垂直切换

一、JQuery实现图片轮播效果 用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色...
  • aspnet2002web
  • aspnet2002web
  • 2012-05-20 01:56
  • 2306

jQuery实现图片轮播且鼠标可控制显示,使用animate函数

图片容器的左下角加一排数组,当鼠标指向某个数字时,就显示相应的图片,并且还有图片轮播效果,使用了jQuery库,实例代码: demo $(document).ready(fu...
  • u010874036
  • u010874036
  • 2016-04-03 17:45
  • 1346
    个人资料
    • 访问:978次
    • 积分:40
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档