jquery 輪播圖實例

時間 2019-11-29

標籤 jquery 實例欄目 JQuery 简体版

原文原文鏈接

實現效果：一、圖片每2秒鐘切換1次。javascript

二、當鼠標停留在整個頁面上時，圖片不進行輪播。css

三、當點擊右下角的小球時，出現該選項的對應圖片，並且切換頁選項的背景顏色發生相應的變化。html

四、當圖片發生輪播切換時，在不點擊小球前提下，相應的小球背景顏色也自動發生變化。java

index.htmljquery

<!DOCTYPE html>
<html>
<head>
    <title>jQuery實現輪播圖</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="main">
<h3>jQuery實現輪播圖</h3>
<!-- 圖片輪播 -->
    <div class="banner">
        <img src="img/1.jpg" />
        <img src="img/2.jpg" />
        <img src="img/3.jpg" />
        <img src="img/4.jpg" />
        <img src="img/5.jpg" />
    <!-- 上一張、下一張按鈕 -->
    <a href="javascript:void(0)" class="button prev"></a>
    <a href="javascript:void(0)" class="button next"></a>
         <!-- 圓點導航 -->
    <div class="dots">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    </div>
</div>
</body>
</html>

style.csside

*{margin: 0;padding: 0;}
body{font-family: " Microsoft YaHei";}
.main{margin:30px auto;width:1200px;text-align: center;}
h3{text-align: center;width:1200px;position: relative;}
/*banner圖*/
.banner{width:1200px; height:460px;overflow: hidden;margin-top: 30px;position: relative;border: 10px solid #bbb; }
.banner img{vertical-align: bottom;position: absolute;top: 0;left: 0;/*display: none;*/}
/*.banner img.slide-active{display: block;}*/
/*切換按鈕*/
.button{position: absolute;width:40px;height:80px;left:0;top:50%;margin-top:-40px;}
.prev{background:url(../img/pre2.png) no-repeat center center;}
.next{left: auto;right: 0;background:url(../img/pre.png) no-repeat center center;}
.button:hover{background-color: #333;opacity: 0.6;filter: alpha(60);}
/*切換小圓點*/
.dots{position: absolute;right: 0;bottom: 20px;text-align: right;margin-right: 20px;}
.dots span{display: inline-block;width: 12px;height: 12px;border-radius: 50%;line-height:12px;background-color: rgba(7,17,27,0.4);box-shadow:0 0 0 2px rgba(255,255,255,0.9) inset;margin-right: 8px;cursor: pointer;}
.dots span.active{box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;background-color: #fff;}

script.js函數

$(document).ready(function(){
    var t,count,
        index=0,
        len=$(".banner img").length;
        
    //  初始化狀態，在第一張
    $(".banner img:not(:first-child)").hide();
    $(".dots span:first-child").addClass("active");
   
   // 滑過鼠標清除定時器,滑開繼續
    $(".banner").hover(function(){
        clearInterval(t);
    },
    function(){
        t=setInterval(showAuto, 2000);
    });

    //點擊小圓點跳轉到相應頁面而且小圓點樣式隨之改變
    $(".dots span").click(function(){
      count=$(this).index();//獲取當前點擊對象的id屬性值
      changOption(count);
    });

    //清除定時器
    if(t){
        clearInterval(t);
        t=null;
    }

    // 每隔兩秒自動輪播
    t=setInterval(showAuto, 2000);

    //點擊按鈕切換
    $(".prev").click(function(){
        count=$(".active").index();
        count--;
        if(count < 0){count=len-1;}
        changOption(count);     
    });
    $(".next").click(function(){
        count=$(".active").index();
        count++;
        if(count > len-1){count=0;}
        changOption(count);
    });

// 封裝自動切換的showAuto函數
function showAuto(){
        index++;
        if(index > len-1){index=0;}
    changOption(index);
}

//封裝點擊小圓點改變背景及自身樣式的changeOption()函數
function changOption(curIndex){
   $(".dots span").siblings().removeClass("active");//查找其餘子節點並移除類
   $(".dots span").eq(curIndex).addClass("active");//給當前點擊的對象添加類
   $(".banner img").filter(":visible").hide().parent().children().eq(curIndex).show();
   index=curIndex;
}

});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。