秋痕语录

jQuery版简单轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" author="lxy">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            section{
            margin: 101px auto;
            border: 1px solid red;
            font-size: 0;
            text-align: center;
        }
        .lunbo{
            margin: 0 auto;
            width: 500px;
            height: 300px;
            border: 1px solid beige;
            /*overflow: hidden;*/
        }
        .lunbo img{
            width: 500px;
            height: 300px;
            display: none;
            opacity: 0;
        }
        button{
            border: none;
            width: 100px;
            height: 50px;
            border-radius:10px;
            margin: 5px;
        }
        button:hover{
            border: 1px solid orangered;
            color: orangered;
            cursor: pointer;
        }
        </style>
    </head>
    <body>
        <section>
            <div class="lunbo">
                <img style="display: inline-block;opacity: 1;" src="http://h6.86.cc/walls/20150721/1440x900_5d8830739233940.jpg" alt="" />
                <img src="http://pic.pp3.cn/uploads//20120322BZ/23.jpg" alt="" />
                <img src="http://h5.86.cc/walls/20141222/1440x900_6fcf55e888cbe77.jpg" alt="" />
                <img src="http://img2.91.com/uploads/allimg/130418/32-13041Q50312.jpg" alt="" />
                <img src="http://img01.sogoucdn.com/app/a/100540002/430667.jpg" alt="" />
                <img src="http://img5q.duitang.com/uploads/item/201506/23/20150623203928_HzBWU.jpeg" alt="" />
                <img src="http://h6.86.cc/walls/20150709/mid_46dc3aa68336339.jpg" alt="" />
            </div>
            <button class="prev star">上一张</button>
            <button class="next star">下一张</button>
        </section>
    </body>
</html>
<script type="text/javascript">
    var index = 0
    $(".prev").click(function(){
        index = shang();
        show()
    })
    $(".next").click(function(){
        index = xia();
        show()
    })
    function xia(){
        return index >= $(".lunbo img").length - 1 ? 0 : index + 1;
    }
    function shang(){
        return index <= 0 ? $(".lunbo img").length -1 : index -1;
    }
    function show(){
        $(".lunbo img").eq(index).show()
        $(".lunbo img").eq(index).animate({
            opacity:1
        },500)
        $(".lunbo img").eq(index).siblings(".lunbo img").hide()
        $(".lunbo img").eq(index).siblings(".lunbo img").css('opacity','0')
    }
    var lb = setInterval(function(){
        index = xia();
        show()
    },1500)
    $(".star").mouseover(function(){
        clearInterval(lb)
    })
    $(".star").mouseleave(function(){
        lb = setInterval(function(){
            index = xia();
            show()
        },1500)
    })
</script>


打赏

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

©2017 Lxy 豫ICP备17013024号
Copyright2017 lixueyang All Rights Reserved

公告

Welcome to my blog, where you will experience the thrill of not exceeding