透明度变化轮播图特效 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        img{
            border: 0;
        }
        .box{
            width: 200px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto 0;
            position: relative;
            overflow: hidden;
        }
        .boxlist{
            width: 1200px;
            height: 300px;
        }
        .boxlist li{
            width: 200px;
            height: 300px;
            float: left;
        }
        .boxlist li a{
            display: block;
        }
        .boxlist li a img{
            display: inline-block;
            width: 100%;
        }
        .btn{
            width: 150px;
            height: 30px;
            border: 1px solid red;
            border-radius: 10px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -75px;
        }
        .btn li{
            float: left;
            width: 18px;
            height: 30px;
            background-color: #aaa;
            float: left;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            margin-left: 5px;
            cursor: pointer;
        }
        .btnPos{
            cursor: pointer;
        }
        .btnLeft{
            position: absolute;
            width: 40px;
            height: 60px;
            top: 50%;
            margin-top: -30px;
            background-color: #aaa;
            left: 0
        }
        .btnRight{
            position: absolute;
            width: 40px;
            height: 60px;
            top: 50%;
            margin-top: -30px;
            background-color: #aaa;
            right: 0;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
    <div class="box">
        <ul class="boxlist">
            <li><a href=""><img src="image/1.jpg" alt=""></a></li>
            <li><a href=""><img src="image/2.jpg" alt=""></a></li>
            <li><a href=""><img src="image/3.jpg" alt=""></a></li>
            <li><a href=""><img src="image/4.jpg" alt=""></a></li>
            <li><a href=""><img src="image/5.jpg" alt=""></a></li>
            <li><a href=""><img src="image/6.jpg" alt=""></a></li>
        </ul>
        <ul class="btn">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <ul class="btnPos">
            <li class="btnLeft">左</li>
            <li class="btnRight">右</li>
        </ul>
    </div>
</body>
</html>
<script>
    $(function(){
        wheel()

    })

    function wheel(){
        var boxlist=$('.boxlist');
        var btn=$('.btn');
        var btnList=$('.btn li')
        var timer=null;
        var index=0;
        timer=setInterval(function(){
            tt()
        },3000)

        // 按钮控制
        btn.hover(function(){
            clearInterval(timer);
            btnList.click(function(){
                    index=$(this).index()

                    boxlist.stop().animate({
                        marginLeft: -200*index+"px"
                    },600)
                    gl()
                })
        },function(){
            timer=setInterval(function(){
                tt()
            },3000)
        })
        
        // 左右按钮控制
                var btnLeft=$('.btnLeft');
                var btnRight=$(".btnRight");
                btnLeft.click(function(){
                    clearInterval(timer);
                    tt();
                    timer=setInterval(function(){
                        tt()
                    },3000)
                })
                btnRight.click(function(){
                    clearInterval(timer);
                    tt(1);
                    timer=setInterval(function(){
                        tt(1)
                    },3000)
                })
            
        // 高亮按钮
                    function gl(){
                            if(index > 5){
                                index=0;
                            }
                            if(index < 0){
                                index=5
                            }

                            for (var i = 0; i < btnList.length; i++) {
                            $(btnList[i]).css({
                                backgroundColor: "#aaa",
                                color: "black"
                            })
                            $(btnList[index]).css({
                                backgroundColor: "#fff",
                                color: "red"
                            })
                        };
                    }
                    gl()

        // 动画
        function tt(pos){
            

            //pos控制按钮方向 -1是左，1是右；
            if(pos){
                pos=1;
                // 向右
                        index--;
                    
                    gl();
                var boxLast=$('.boxlist li:last')
                    boxlist.css({
                        marginLeft: -200+"px"
                    })
                    boxLast.prependTo(boxlist);
                    boxlist.stop().animate({
                        marginLeft: 0+"px"
                    },600)
                    
            }else{
                pos=-1;
                        //向左；
                        index++;
                    
                    gl();
                var boxFirst=$('.boxlist li:first-child')
                    boxlist.css({
                        marginLeft: 0+"px"
                    })
                    boxlist.stop().animate({
                        marginLeft: pos*200+"px"
                    },600)
                    boxFirst.appendTo(boxlist)
            }
            
        }


    }
    
</script>

 

posted @ 2015-06-21 16:06  灰太狼博客  阅读(329)  评论(0)  编辑  收藏  举报