javaScript原生实现轮播图
function autoplay(){
photo_index++; //全局变量保存下标
if(photo_index>=photo_array.length) photo_index=0;
//photp_array数组保存了全部图片的dom对象
for(let i=0;i<photo_array.length;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动画实现轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3动画轮播图</title>
<style>
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;}
}
</style>
</head>
<body>
<div class="container" >
<div class="image-box">
<img src="./img/bg1.jpg" >
<img src="./img/bg2.jpg" >
<img src="./img/bg3.jpg" >
<img src="./img/bg1.jpg" > <!-第四张图片实现无缝链接->
</div>
</div>
</body>
</html>
这种利用动画实现的轮播图优点在于,图与图之间在切换的时候,实现了卷轴滚动的效果,切换效果没有如同直接使用display="none"和display="block" 那么突兀