DIV CSS 佈局教程網

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。