基于jQuery实现淡入淡出效果轮播图

用JavaScript做了平滑切换的焦点轮播图之后，用jQuery写了个简单的淡入淡出的轮播图，代码没有做优化，html结构稍微有一些调整，图片部分用ul替换了之前用的div。

html结构如下：

  

   

   

   

  
  

   

   

   

  
  <
  >

 

css设置：

*{ 
    margin: 0;
    padding: 0; 
    text-decoration: none;
   }
  ul{
   list-style: none;
  }
  #container{
   position: relative;
   width: 400px;
   height: 200px;
   margin: 20px auto;
  }
  
  .pic li {
   position: absolute;
   top: 0;
   left: 0;
   display: none;
  }
  .pic li img {
   width: 400px;
   height: 200px;
  }
  #position{
   position: absolute;
   bottom: 0;
   right:0;
   margin: 0;
   background: #000;
   opacity: 0.4;
   width: 400px;
   text-align: center;
  }
  #position li{
   width: 10px;
   height: 10px;
   margin:0 2px;
   display: inline-block;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   background-color: #afafaf;
  }
  #position .cur{
   background-color: #ff0000;
  }

   .arrow { 
    cursor: pointer;
    display: none; 
    line-height: 39px; 
    text-align: center; 
    font-size: 36px; 
    font-weight: bold; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    z-index: 2; 
    top: 50%;
    margin-top: -20px; /*width的一半*/
    background-color: RGBA(0,0,0,.3); 
    color: #fff;
   }
  .arrow:hover { 
   background-color: RGBA(0,0,0,.7);
  }
  #container:hover .arrow { 
   display: block;
  }
  #prev { 
   left: 20px;
  }
  #next { 
   right: 20px;
  }

JavaScript代码：

$(function(){
   //第一张显示
   $(".pic li").eq(0).show();
   //鼠标滑过手动切换，淡入淡出
   $("#position li").mouseover(function() {
    $(this).addClass('cur').siblings().removeClass("cur");
    var index = $(this).index();
    i = index;//不加这句有个bug，鼠标移出小圆点后，自动轮播不是小圆点的后一个
    // $(".pic li").eq(index).show().siblings().hide();
    $(".pic li").eq(index).fadeIn(500).siblings().fadeOut(500);
   });
   //自动轮播
   var i=0;
   var timer=setInterval(play,2000);
   //向右切换
   var play=function(){
    i++;
    i = i > 2 ? 0 : i ;
    $("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
    $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
   }
   //向左切换
   var playLeft=function(){
    i--;
    i = i < 0 ? 2 : i ;
    $("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
    $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
   }
   //鼠标移入移出效果
   $("#container").hover(function() {
    clearInterval(timer);
   }, function() {
    timer=setInterval(play,2000);
   });
   //左右点击切换
   $("#prev").click(function(){
    playLeft();
   })
   $("#next").click(function(){
    play();
   })
  })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。