jquery圖片輪播

時間 2019-11-16

標籤 jquery 圖片欄目 JQuery 简体版

原文原文鏈接

實現效果：圖片自動輪播；html

鼠標移入相應數字，會顯示相應圖片。jquery

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.1.1.min.js"></script>    <style>        .pic{            width: 570px;            height:273px;            overflow: hidden;        }         a {            width: 20px;            height: 20px;            border: 1px solid darksalmon;            text-decoration: none;            background-color: darksalmon;            color: white;            border-radius:50%;            display: inline-block;            /*display: inline-block;做用：爲a設置寬高，並顯示在一行*/            text-align: center;        }        .num {            margin-top: -23px;            margin-left: 430px;        }        .s {            background-color:orangered;        }    </style></head><body><div class="pic">    <img src="../img/1.jpg">    <img src="../img/2.jpg">    <img src="../img/3.jpg">    <img src="../img/4.jpg"></div><div class="num">    <a>1</a>    <a>2</a>    <a>3</a>    <a>4</a></div>    <script>        var i =0;        var timer;        //建立一個Show函數        function Show(){            $('img').eq(i).fadeIn(200).siblings("img").fadeOut(200);            //fadeIn()淡入，fadeOut()淡出。實現第i張圖片顯示時，其他隱藏。            $('div a').eq(i).addClass("s").siblings("div a").removeClass("s");            //只給對應i的數字以新樣式，其他保持原樣式。        }        //建立一個showTime()函數        function showTime(){            //定時器            timer = setInterval(function(){                //調用Show()函數                Show();                i++;                //當圖片是最後一張，設置圖片爲第一張                if(i==4){                    i=0;                }            },2000);        }    $(function () {        showTime();//調用showTime（）函數    })//鼠標移入相應數字，顯示對應圖片    $("a").mouseenter(function () {        i = $(this).index();        console.log(i);        Show();        clearInterval(timer);    })    $("a").mouseout(function () {        showTime();    })</script></body></html>

相關標籤/搜索

每日一句

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