小米首页轮播图开发(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”)控制实空心圆的变化。