用jquery实现轮播图的效果-技术圈

今天分享的是一个简单的轮播图，这个轮播图的特效很简单，能够进行图片的轮播以及点击相应图片，图片能够跳转到相应位置，首先书写的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标签的长度        //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)+"
"            }        }        //输出原点        num.html(html_page)        //显示索引对应的图片        function showPic(index) {            imgCon.eq(index).show().siblings("li").hide();            num.find("li").eq(index).addClass("active").siblings("li").removeClass("active")        }        //原点点击事件        $(".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")//触发备选元素的指定事件    })script>

最后因为是用jquery书写的代码，还要导入。

最后是完整代码


<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标签的长度        //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)+"
"            }        }        //输出原点        num.html(html_page)        //显示索引对应的图片        function showPic(index) {            imgCon.eq(index).show().siblings("li").hide();            num.find("li").eq(index).addClass("active").siblings("li").removeClass("active")        }        //原点点击事件        $(".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")//触发备选元素的指定事件
    })script>body>html>