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;
}
