js--图片轮换

写了个小的图片切换demo，之前用过类似的插件，想自己用jq实现个，写得有点乱..

html部分：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>fangyin</title>
		<link rel="stylesheet" href="css/test.css">
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/test.js"></script>
		<script type="text/javascript" >
			
		</script>
	</head>
	<body>
		<div class="test" id="test">
			<ul class="slide">
				<li class="slide-item">
					<img src="images/reel_1.jpg" alt="1" >		
				</li>
				<li class="slide-item">
					<img src="images/2.jpg" alt="2" >			
				</li>
				<li class="slide-item">
					<img src="images/3.jpg" alt="3">			
				</li>
				<li class="slide-item">
					<img src="images/4.jpg" alt="4">			
				</li>
			</ul>
			
			<div class="slide-choice">
				 <a href="#" rel="1">1</a>
				 <a href="#" rel="2">2</a>	
				 <a href="#" rel="3">3</a>
			</div>
			
		</div>
	</body>
</html>

　　

js 部分:

window.onload = function(){
    Slide.start();
    $('.slide-choice a').click(Slide.clickSlide);
}

var Slide = {
    num:0,
    imgcount:0,
    start: function(){
        num =  $('.test .slide li').length;
        console.log('num='+num);
        var imageWidth = $("window").width();
        

        $('.slide-choice').show();
        $('.slide-choice a:first').addClass('active');
        this.imageInit();
        this.clickSlide(); 
        var that = this;
        $('.slide').hover(function(){
            clearInterval(play);  
        },function(){
            that.imageInit();      
        });
    },

    imageInit:function(){
        var that = this;
        play = setInterval(function(){
            var length =Slide.imgcount * -600;
            $('.slide').animate({"top":length},500);
            Slide.imgcount++;
            console.log('imgcount='+Slide.imgcount);
            if(Slide.imgcount == num){
                Slide.imgcount = 0;
                $('.slide').animate({"top":0},0);
            }
            that.rotate();
        },2000);
        
    },

    rotate:function(){
        $active = $('.slide-choice a.active').next(); 
        if($active.length === 0 ){
            $active = $('.slide-choice a:first');
        }
        $('.slide-choice a').removeClass('active');
        $active.addClass('active');
    },

    clickSlide:function(){
       var a = $('.slide-choice a').index(this);
       console.log("you click the num="+a);
       var length = a*-600;
       $('.slide').animate({"top":length},500);
       $active = $(this); 
       $('.slide-choice a').removeClass('active');
       $active.addClass('active');
       return false;
    }

};

　　

css部分：

body{
    margin:0;
    padding:0;
}
img { border:0; }

.test{
	width:100%;
	height:300px;	
    position:relative;
    overflow:hidden;
    margin:10px ;
}
.slide{
    position:relative;
	width:500px;
    height:300px;
    list-style:none;
}
.slide-item{
    float:left;
}
.slide-choice{
    position:absolute;
    bottom:0px;
    left:300px;
    width:500px;
    height:50px;
    text-align:center;
    line-height:20px;
    //background:url(paging_bg2.png) no-repeat;
    color:#fff;
    display:none;
}
.slide-choice a{
    padding:0px;
    color:#fff;
    text-decoration:none;
    position:relative;
    background:rgba(0,0,0,0.8);
} 
.slide-choice a.active{
    font-weight:bold;
    background:#ccd;
}
.slide-choice a:hover{
    font-weight:bold;
    border: 1px solid #610000;
}

　　

posted @ 2013-01-26 14:47  GM_Lv  阅读(697)  评论(0)    收藏  举报