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

js原生轮播图+jQuery轮播图+CSS3动画实现轮播图

javaScript原生实现轮播图

jQuery实现轮播图

CSS3动画实现轮播图

猜你喜欢