平武建站

使用jQuery怎么实现一个淡入淡出图片轮播效果-创新互联

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

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了辛集免费建站欢迎大家使用！

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怎么实现一个淡入淡出图片轮播效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

    另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


    网页标题：使用jQuery怎么实现一个淡入淡出图片轮播效果-创新互联
    网页路径：http://pwwzsj.com/article/diojje.html

    其他资讯