简单轮播图

Posted 2021-02-27 heysakura

CSS代码：
{
font-family: 微软雅黑;
}
.container{
width: 1140px;
padding: 0px 15px;
margin: 0 auto;
}
.carousel{
position: relative;
}
.window{
height: 303px;
width: 1140px;
overflow: hidden;
position: relative;
}
.image_reel{
position: absolute;
top: 0px;
left: 0px;
}
.image_reel img{
float: left;
}
.paging{
position: absolute;
/width: 150px;
height: 50px;*/
bottom: 0px;
right: 0px;
margin-right: 10px;
z-index: 100;
text-align: center;
line-height: 40px;
display: none;
}
.paging a{
padding: 0px 5px;
text-decoration: none;
color: #fff;
}
.paging a.active{
font-weight: bold;
background: #920000;
border: 1px solid #610000;
border-radius: 3px;
}
.paging a:hover{
font-weight: bold;
}

html代码：

javascript代码：
// 第一步
$(".paging").show();
$(".paging a:first").addClass("active");

imageWidth=$(".window").width();
imageSum=$(".image_reel img").size();
imageReelWidth=imageWidth*imageSum;

$(".image_reel").css({‘width‘:imageReelWidth});

// 第二步
rotate=function(end){
if(end){
var triggerID=imageSum-1;
var image_reelPosition=triggerID*imageWidth;

    $(".paging a").removeClass(‘active‘);
    $active.addClass(‘active‘);
    $(".image_reel").animate({
        left:-image_reelPosition
    },500,function(){
        $(this).css({‘left‘:‘0px‘});
    });
}
else{
    var triggerID=$active.attr("rel")-1;
    var image_reelPosition=triggerID*imageWidth;
    $(".paging a").removeClass(‘active‘);
    $active.addClass(‘active‘);
    $(".image_reel").animate({
        left:-image_reelPosition
    },500);
}

}

rotateSwitch=function(){
play=setInterval(function(){
$active=$(".paging a.active").next();
rel=$(".paging a.active").attr(‘rel‘);
if(rel==7){
$active=$(".paging a:first");
end=true;
}else{
end=false;
}
rotate(end);
}, 4000);
};

rotateSwitch();

// 第三步
$(".image_reel a").hover(function(){
clearInterval(play);
},function(){
rotateSwitch();
})

$(".paging a").click(function(){
$active=$(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});