css3轮播不用jpuery_js原生轮播图+jQuery轮播图+CSS3动画实现轮播图

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" 那么突兀