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

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

html结构如下： 

<div id="container">
  <ul class="pic">
   <li><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></li>
   <li><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></li>
   <li><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3"></a></li>
  </ul>
  <ul id="position">
   <li class="cur"></li>
   <li class=""></li>
   <li class=""></li>
  </ul>
  <a href="javascript:;" id="prev" class="arrow"><</a>
  <a href="javascript:;" id="next" class="arrow">></a>

 </div>

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();
   })
  })

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery轮播图
jQuery淡入淡出
jquery淡入淡出轮播图、jquery 淡入淡出轮播、jquery实现淡入淡出、淡入淡出轮播图、jq淡入淡出轮播图，以便于您获取更多的相关知识。