javaScript原生实现轮播图
function autoplay(){
photo_index++; //全局变量保存下标
if(photo_index>=photo_array.length) photo_index=0;
//photp_array数组保存了全部图片的dom对象
for(let i=0;i
photo_array[i].style.display="none";
}//将全部图片的display设置为none
photo_array[photo_index].style.display="block";
//将下一张图片设置显示
}
jQuery实现轮播图
var num=$(".carouselIndex span[class=sel]").index();
//选取了导航点并利用index方法返回了这个导航点相对其他兄弟元素的下标位置
num=(num+1)%bannerNumber;//由约瑟夫问题想出的用队列解决下标问题
$(".carouselContenta").eq(num).fadeIn(500).siblings().fadeOut(500);
//指定元素淡入,其他兄弟元素淡出
导航点示意图
//这里顺带一提Prev按钮的实现方法,上面原生js使用的超出图片数组下标,就重新设置index的方法
//但是Jquery里可以利用eq函数,这是因为eq函数即使输入负数,也会给这个负数加上,这个元素及其兄弟元素的总个数,所以不用担心index出现小于0的情况
var num=$(".carouselIndex span[class=sel]").index();
num=(num-1)%bannerNumber; //可以安心使用循环队列的方法
$(".carouselContent a").eq(num).fadeIn(500).siblings().fadeOut(500); //eq选取函数
CSS3动画实现轮播图
CSS3动画轮播图div,img{
padding: 0;
margin: 0;
}
.container{
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
margin: 50px auto 0 auto;
}
.image-box{
width: 1600px;
height:200px;
position: absolute;
left: 0;
animation: focusmap 6s infinite;
}
.image-box >img{
width: 400px;
height: 200px;
float: left;
}
@keyframes focusmap{
0%,30% { left: 0;}
35%,65%{left: -400px; }
70%,99%{left: -800px;}
100%{left: -1200px;}
}
这种利用动画实现的轮播图优点在于,图与图之间在切换的时候,实现了卷轴滚动的效果,切换效果没有如同直接使用display="none"和display="block" 那么突兀