jquery实现漂亮的轮播图

今天工作中要用到一个轮播功能，在网上找了一些，觉得有些过于繁琐，于是自己动手写了一个，效果如图：
代码如下：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

</head>

<style>

    .oop_inner{

        margin:0 auto;

        position:relative;

        top:10px;

        width:640px;

        height:424px;

        box-shadow:1px 2px 3px #666;

        overflow:hidden;

    }

    .oop_banner{

        position:absolute;

        width:2600px;

        /* left:-640px; */

    }

    .oop_banner img{

        float:left;

        width:640px;

    }

    .oop_li{

        position:absolute;

        left:45%;

        bottom:20px;

    }

    .oop_li span{

        display:block;

        float:left;

        margin-right: 10px;

        width:15px;

        height:7px;

        background:#fff;

        box-shadow: 1px 1px;

        cursor:pointer;

    }

    .oop_li span:hover{

        background:#000;

    }

    .oop_li .on{

        background:#000;

    }

    .oop_inner a{

        position:absolute;

        display: block;

        width:40px;

        height:40px;

        line-height:36px;

        box-shadow: 0px 0px 3px 2px;

        color:#fff;

        top:45%;

        text-align:center;

        font-size:40px;

        text-decoration:none;

    }

    .oop_inner a:hover{

        box-shadow: 0px 0px 3px 2px #000;

    }

    .oop_inner .last{

        left:15px;

    }

    .oop_inner .next{

        right:15px;

    }

</style>

<body>

    <div class="oop_inner">

        <div class="oop_banner">

            <img src="1.jpg" alt="">

            <img src="2.jpg" alt="">

            <img src="3.jpg" alt="">

            <img src="4.jpg" alt="">

        </div>

        <div class="oop_li">

            <span index="0" class="on"></span>

            <span index="1"></span>

            <span index="2"></span>

            <span index="3"></span>

        </div>

        <a href="javascript:void(0);" class="last">&lt;</a>

        <a href="javascript:void(0);" class="next">&gt;</a>

    </div>

</body>

<script src="../jquery-1.7.2.min.js"></script>

</html>

<script>

    $(function(){

        start();

        //定时开始

        var i = 0;

        function start(){

            banner = setInterval(function(){

                i+=1;

                if(i == 4){

                    i =0;

                }

                onclass();

                var le = i* -640;

                $('.oop_banner').animate({left:le});

            },2000);

        }

        //定时停止

        function stop(){

            clearInterval(banner);

        }

        //选中样式

        function onclass(){

            $('.oop_li>span').each(function(e){

                if(e == i){

                    $(this).addClass('on');

                }else{

                    $(this).removeClass('on');

                }

            })

        }

        //点击按钮

        $('.oop_li>span').click(function(){

            $('.oop_li>span').removeClass('on');

            $(this).addClass('on');

            var le = $(this).attr('index') * -640;

            $('.oop_banner').animate({left:le});

            i =  parseInt($(this).attr('index'));

        })

        //鼠标滑入

        $('.oop_inner').mouseenter(function(){

            stop();

        })

        //鼠标滑出

        $('.oop_inner').mouseleave(function(){

            start();

        })

        //下一个

        $('.next').click(function(){

            i+=1;

            if(i == 4){

                i = 0;

            }

            onclass();

            var le = i* -640;

            $('.oop_banner').animate({left:le});

        })

        //上一个

        $('.last').click(function(){

            i-=1;

            if(i == -1){

                i = 3;

            }

            onclass();

            var le = i* -640;

            $('.oop_banner').animate({left:le});

        })

    })

</script>
巴特西

jquery实现漂亮的轮播图

最新文章

热门文章
