溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Jquery實現(xiàn)圖片輪播功能

發(fā)布時間：2020-08-09 03:40:51 來源：網(wǎng)絡(luò) 閱讀：589 作者：chencanfeng 欄目：web開發(fā)

    
周末閑暇時，參照http://www.cnblogs.com/babyzone2004/archive/2010/08/30/1812682.html實現(xiàn)了個jquery圖片輪播特效

界面效果：

Jquery實現(xiàn)圖片輪播功能

















css實現(xiàn)：

*{
    margin: 0;
}
div{
    position:relative;
    width:600px;
    height:400px;
    border:1px #000 solid;
    overflow:hidden;
    margin:auto;
}
div ul{
 list-style-type:none;
 position:absolute;
 bottom:0;
 z-index:11;
 right:25px;
 filter: Alpha(Opacity=80);opacity:0.8;
}
div ul li{
    width:30px;
    line-height:30px;
    border-left: 0;
    border-top:1px #FFF solid;
    border-right:1px #FFF solid;
    border-bottom:1px #FFF solid;
    text-align:center;
    vertical-align:middle;
    float:left;
    background-color:#0ABB6A;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    color:#FFF;
}
.list{
    background-color:#AF0348;
    color:#000;
}
ul li:first-child{
    border-left:1px #FFF solid;
}
a{
    position:fixed;
}
#banner_bg{
    width:600px;
    height:30px;
    background-color:#000;
    position:absolute;
    z-index:10;
    filter: Alpha(Opacity=40);opacity:0.4;
    bottom:0;
}

js代碼實現(xiàn)：

var n = 0,i = 0, count = 0;var timeout = 2000;var nid;
$(function(){        
$("div > div a").not(":first-child").hide();
         $("div > ul li").eq(0).addClass("list");
          count = $("div > ul li").length;          
          var index = 0;         
           $("div > ul li").hover(function(){                 
            index = $(this).index();                 
            $(this).addClass("list");                  
            $(this).parent().children().not(":eq("+ index +")").removeClass("list"); },
              function(){
              $(this).removeClass("list");           
              $(this).parent().children().eq(n).addClass("list"); 
            });        
                           
            $("div > ul li").click(function(){
                    i = $(this).text() - 1;               
                    n = i;               
                    $("div > div a ").eq(i).fadeIn(1500); 
                    $(this).addClass("list");                            
                    $(this).parent().children().not(":eq(" + i + ")").removeClass("list");
                    $("div > div a").not(":eq(" + i + ")").fadeOut(1500);    });       
                    clearInterval(nid);        
                    nid = setInterval(function(){
                          Change();            
                    },timeout);        
                    $("div *").hover(function(){
                          clearInterval(nid);
                    },function(){                
                    clearInterval(nid); 
                    nid = setInterval(function(){
                    Change();                    
                    },timeout);    
                    });    
                    });function Change(){
                       n = n >= count ? 0 : ++ n;
                       $("#banner > ul li").eq(n).trigger("click");
                    }
html實現(xiàn)：
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>-jquery 圖片輪換-</title>
  <link type="text/css" rel="stylesheet" href="css/basic.css"/>
  <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
  <script type="text/javascript" src="js/basic.js"></script>
 </head>
 <body>
  <div id = "banner">
  <div id="banner_bg"></div>
       <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
       </ul>
       <div>
       <a target="_blank"><img src="p_w_picpaths/list_02.jpg" alt="圖片輪播" title="圖片輪播"/></a>
       <a target="_blank"><img src="p_w_picpaths/list_03.jpg" alt="圖片輪播" title="圖片輪播"/></a>
       <a target="_blank"><img src="p_w_picpaths/list_04.jpg" alt="圖片輪播" title="圖片輪播"/></a>
       <a target="_blank"><img src="p_w_picpaths/list_05.jpg" alt="圖片輪播" title="圖片輪播"/></a>
       <a target="_blank"><img src="p_w_picpaths/list_06.jpg" alt="圖片輪播" title="圖片輪播"/></a>
      </div>
  </div>
 </body>
</html>
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手