小米首页轮播图开发

小米首页轮播图开发（html,css已写好基础上）

实现效果如上，先上代码：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
var index = 0;
$(".btn-item").click(function(){
    index = $(this).index();
    $(this).addClass("active").siblings().removeClass("active");
    $(".img-item").eq(index).fadeIn().siblings().fadeOut();
});
$(".tab-right").click(function(){
    index++;
    if(index > 4){
        index = 0;
    }
    $(".img-item").eq(index).fadeIn().siblings().fadeOut();
    $(".btn-item").eq(index).addClass("active").siblings().removeClass("active");
});
$(".tab-left").click(function(){
    index--;
    if(index <0 ){
        index = 4;
    }
    $(".img-item").eq(index).fadeIn().siblings().fadeOut();
    $(".btn-item").eq(index).addClass("active").siblings().removeClass("active");
});
</script>

引入js/jquery.js

var index = 0;定义图片的起始下标值为0；

（1）写轮播从轮播图下面的小点开始写

$(".btn-item").click(function(){
    index = $(this).index();
    $(this).addClass("active").siblings().removeClass("active");
    $(".img-item").eq(index).fadeIn().siblings().fadeOut();
});

如果我们点击按钮则会出现切换 btn-item
1.$ 符（$符 jquery的一个实例）找到 btn-item ，点击之后 给定一个方法click(function（）{
index = $(this).index();
获取等于此刻点击的图片的下标。

$(this).addClass("active").siblings().removeClass("active");
把每一个按钮都留一个active,控制它的实空圆，siblings()表示找出此刻点击按钮以外的元素，removeClass("active")消除active的样式。

 $(".img-item").eq(index).fadeIn().siblings().fadeOut();
找到图片，eq(index)找到此刻图片的下标，fadeIn()淡入，除了它以外其他元素则用到siblings().fadeOut() 淡出（淡入淡出，元素渐变的应用）

})；

（2）之后写左右切换（只写右边，左边一样）

$(".tab-right").click(function(){
    index++;
    if(index > 4){
        index = 0;
    }
    $(".img-item").eq(index).fadeIn().siblings().fadeOut();
    $(".btn-item").eq(index).addClass("active").siblings().removeClass("active");
});

首先找到右边tab-right,点击发生事件。

index++;（点击之后下标++）
    if(index > 4){
        index = 0;
    }

控制点击图片可循环。

$(".img-item").eq(index).fadeIn().siblings().fadeOut();
找到图片，找到此刻点击图片下标，淡入，其他未点击淡出。

$(".btn-item").eq(index).addClass(“active”).siblings().removeClass(“active”);
此时不是找点击的图片，而应该找到本次所到按钮，再找到此刻图片下标，addClass(“active”).siblings().removeClass(“active”)控制实空心圆的变化。