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>

 

posted @ 2018-11-29 14:26  小圆。  阅读(904)  评论(3)  编辑  收藏  举报