天天爱天天干天天,亚洲一区二区三区污污污,一级黄色特级片,波多野吉衣在线观看免费天堂,www.色香蕉,五月丁香亭亭操逼,日本黄色电影网址,国产在线看片

今天分享的是一個(gè)簡(jiǎn)單的輪播圖，這個(gè)輪播圖的特效很簡(jiǎn)單，能夠進(jìn)行圖片的輪播以及點(diǎn)擊相應(yīng)圖片，圖片能夠跳轉(zhuǎn)到相應(yīng)位置，首先書寫的div部分：


<div id="scrollPics">    <ul class="slider">        <li><img src="../images/1.jpg" alt="">li>        <li><img src="../images/2.jpg" alt="">li>        <li><img src="../images/3.jpg" alt="">li>        <li><img src="../images/7.jpg" alt="">li>        <li><img src="../images/5.jpg" alt="">li>    ul>    <ul class="num">ul>div>

然后書寫style樣式部分


<style>        *{            margin: 0px;            padding: 0px;        }        ul{            list-style: none;        }        #scrollPics{            height: 420px;            width: 790px;            margin-bottom: 10px;            overflow: hidden;            position: relative;            top: 100px;            left:400px;        }        .slider{        margin-top: 0px;        }        .slider img{        width: 100%;        }        .num{        position: absolute;        right: 5px;        bottom: 5px;        }        .num li{        float: left;        color: #ff7300;        text-align: center;        line-height: 16px;        width: 16px;        height: 16px;        cursor: pointer;        overflow: hidden;        margin: 3px 1px;        border: 1px solid #ff7300;        background-color: white;        border-radius: 50%;        }        .num li.active{        color: #fff;        line-height: 21px;        width: 21px;        height: 21px;        font-size: 16px;        margin: 0 1px;        border: 0;        background-color: #ff7300;        font-weight: bold;        border-radius: 50%;        cursor: pointer;        }style>

最后是script部分


<script>    $(function () {        var slider =$("#scrollPics .slider");        //獲取圖片        var imgCon =$("#scrollPics .slider li");        //除第一張其余的圖片全部隱藏        imgCon.not(imgCon.eq(0)).hide();        //定義頁碼        var num =$("#scrollPics .num")        //獲取li標(biāo)簽的長(zhǎng)度        //find()方法返回備選元素的后代元素        var len =slider.find("li").length;        var html_page ="";        index=0;        //添加頁碼        for (var i=0;i            if (i===0){                html_page+=""+(i+1)+"
"            }            else {                html_page +=""+(i+1)+"
"            }        }        //輸出原點(diǎn)        num.html(html_page)        //顯示索引對(duì)應(yīng)的圖片        function showPic(index) {            imgCon.eq(index).show().siblings("li").hide();            num.find("li").eq(index).addClass("active").siblings("li").removeClass("active")        }        //原點(diǎn)點(diǎn)擊事件        $(".num li").click(function () {            index=$(this).index()            showPic(index)        })        //圖片輪播        $("#scrollPics").hover(function () {            clearInterval(window.timer)        },function () {            window.timer =setInterval(function () {                showPic(index);                index++;                if (index ===len){                    index =0                }            },2000)        }).trigger("mouseleave")//觸發(fā)備選元素的指定事件    })script>

最后因?yàn)槭怯胘query書寫的代碼，還要導(dǎo)入? ? 。

最后是完整代碼?


<html lang="en"><head>    <meta charset="UTF-8">    <title>JQ輪播圖title>    <script src="../js/jquery-2.2.3.js">script>    <style>        *{            margin: 0px;            padding: 0px;        }        ul{            list-style: none;        }        #scrollPics{            height: 420px;            width: 790px;            margin-bottom: 10px;            overflow: hidden;            position: relative;            top: 100px;            left:400px;        }        .slider{        margin-top: 0px;        }        .slider img{        width: 100%;        }        .num{        position: absolute;        right: 5px;        bottom: 5px;        }        .num li{        float: left;        color: #ff7300;        text-align: center;        line-height: 16px;        width: 16px;        height: 16px;        cursor: pointer;        overflow: hidden;        margin: 3px 1px;        border: 1px solid #ff7300;        background-color: white;        border-radius: 50%;        }        .num li.active{        color: #fff;        line-height: 21px;        width: 21px;        height: 21px;        font-size: 16px;        margin: 0 1px;        border: 0;        background-color: #ff7300;        font-weight: bold;        border-radius: 50%;        cursor: pointer;        }style>head><body>
<div id="scrollPics">    <ul class="slider">        <li><img src="../images/1.jpg" alt="">li>        <li><img src="../images/2.jpg" alt="">li>        <li><img src="../images/3.jpg" alt="">li>        <li><img src="../images/7.jpg" alt="">li>        <li><img src="../images/5.jpg" alt="">li>    ul>    <ul class="num">ul>div><script>    $(function () {        var slider =$("#scrollPics .slider");        //獲取圖片        var imgCon =$("#scrollPics .slider li");        //除第一張其余的圖片全部隱藏        imgCon.not(imgCon.eq(0)).hide();        //定義頁碼        var num =$("#scrollPics .num")        //獲取li標(biāo)簽的長(zhǎng)度        //find()方法返回備選元素的后代元素        var len =slider.find("li").length;        var html_page ="";        index=0;        //添加頁碼        for (var i=0;i            if (i===0){                html_page+=""+(i+1)+"
"            }            else {                html_page +=""+(i+1)+"
"            }        }        //輸出原點(diǎn)        num.html(html_page)        //顯示索引對(duì)應(yīng)的圖片        function showPic(index) {            imgCon.eq(index).show().siblings("li").hide();            num.find("li").eq(index).addClass("active").siblings("li").removeClass("active")        }        //原點(diǎn)點(diǎn)擊事件        $(".num li").click(function () {            index=$(this).index()            showPic(index)        })        //圖片輪播        $("#scrollPics").hover(function () {            clearInterval(window.timer)        },function () {            window.timer =setInterval(function () {                showPic(index);                index++;                if (index ===len){                    index =0                }            },2000)        }).trigger("mouseleave")//觸發(fā)備選元素的指定事件
    })script>body>html>

用jquery實(shí)現(xiàn)輪播圖的效果