无限轮播图特效 

<!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>

 js代码

<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 14:27  灰太狼博客  阅读(192)  评论(0)  编辑  收藏  举报