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

前端技术 2023/09/03 JavaScript

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

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

本文地址：https://www.stayed.cn/item/6658

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案