使用jQuery怎么实现一个淡入淡出图片轮播效果

这篇文章给大家介绍使用jQuery怎么实现一个淡入淡出图片轮播效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联公司是一家网站设计制作、网站制作,提供网页设计,网站设计,网站制作,建网站,按需网站策划,网站开发公司,从2013年开始是互联行业建设者,服务者。以提升客户品牌价值为核心业务,全程参与项目的网站策划设计制作,前端开发,后台程序制作以及后期项目运营并提出专业建议和思路。

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致)

css部分:

HTML部分:


  
    
      
  •                                    
  •       
  •                                    
  •       
  •                                    
  •       
  •                                    
  •       
  •                                    
  •                           <
            >
        

    juery代码实现图片的自动轮播和 手动轮播效果

    
    
     $(function() {
       //代码初始化
        var size=$(".img li").size();
        for (var i = 1; i <= size; i++) {
          var li="
  • "+i+"
  • ";       $(".num").append(li);     };     //手动控制轮播效果     $(".img li").eq(0).show();     $(".num li").eq(0).addClass("active");     $(".num li").mouseover(function() {       $(this).addClass("active").siblings().removeClass("active");       var index = $(this).index();       i=index;       $(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);     })     //自动     var i = 0;     var t = setInterval(move, 1500);     //核心向左的函数     function moveLeft() {       i--;       if (i == -1) {          i = size-1;       }       $(".num li").eq(i).addClass("active").siblings().removeClass("active");       $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);     }     //核心向右的函数     function move() {       i++;       if (i == size) {         i = 0;       }       $(".num li").eq(i).addClass("active").siblings().removeClass("active");       $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);     }     //定时器的开始与结束     $(".out").hover(function() {       clearInterval(t);     }, function() {       t = setInterval(move, 1500)     })     //左边按钮的点击事件     $(".out .left").click(function() {       moveLeft();     })     //右边按钮的点击事件     $(".out .right").click(function() {       move();     })   })

    这里使用本站演示图片,构建完整代码如下:

    
    
    
    
    www.jb51.net jQuery淡入淡出轮播图
    
    
    
      
        
          
  •                                    
  •       
  •                                    
  •       
  •                                    
  •       
  •                                    
  •       
  •                                    
  •                           <
            >       $(function() {    //代码初始化     var size=$(".img li").size();     for (var i = 1; i <= size; i++) {       var li="
  • "+i+"
  • ";       $(".num").append(li);     };     //手动控制轮播效果     $(".img li").eq(0).show();     $(".num li").eq(0).addClass("active");     $(".num li").mouseover(function() {       $(this).addClass("active").siblings().removeClass("active");       var index = $(this).index();       i=index;       $(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);     })     //自动     var i = 0;     var t = setInterval(move, 1500);     //核心向左的函数     function moveLeft() {       i--;       if (i == -1) {          i = size-1;       }       $(".num li").eq(i).addClass("active").siblings().removeClass("active");       $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);     }     //核心向右的函数     function move() {       i++;       if (i == size) {         i = 0;       }       $(".num li").eq(i).addClass("active").siblings().removeClass("active");       $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);     }     //定时器的开始与结束     $(".out").hover(function() {       clearInterval(t);     }, function() {       t = setInterval(move, 1500)     })     //左边按钮的点击事件     $(".out .left").click(function() {       moveLeft();     })     //右边按钮的点击事件     $(".out .right").click(function() {       move();     })   })

    关于使用jQuery怎么实现一个淡入淡出图片轮播效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


    网站栏目:使用jQuery怎么实现一个淡入淡出图片轮播效果
    URL链接:http://pwwzsj.com/article/igiejh.html