首页手记纯js轮播器的运用

纯js轮播器的运用

标签：

Html5 JavaScript

轮播器是在制作网站时常常运用到的一种功能

一、简单的轮播器

通过一个简单的轮播器，来为大家介绍轮播器的原理

首先为大家展示效果

上图为该例子要实现的效果展示，在图片会自动播放的同时，还拥有左右按钮供人操作

编写html与css代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ol,ul,li{
            list-style: none;
        }
        .carousel{
            position: relative;
            width: 620px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid black;
            overflow: hidden; /**将超出展示窗口的部分隐藏**/
        }
        .carousel>ul{
            position: relative;
            left: 0;
            width: 2480px;
            height: 100%;
        }
        .carousel>ul>li{
            float: left;
            width: 620px;
            height: 100%;
        }
        .carousel>ul>li img{
            width: 100%;
            height: 100%;
        }
        .carousel>span{
            position: absolute;
            top:50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 30px;
            color: white;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.4);
            z-index: 1;
        }
        .carousel>span:nth-of-type(1){
             left: 20px;
         }
        .carousel>span:nth-of-type(2){
            right: 20px;
        }
        .carouselTransition{  /**过渡类**/
            transition: left 1s;
        }
    </style>
</head>
<body>
<div class="carousel">
    <span> < </span>
    <span> > </span>
    <ul>
        <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/天空奇幻.jpg"></li>
        <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/海洋天空.jpg"></li>
        <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/雪景树.jpg"></li>
        <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/天空奇幻.jpg"></li>
    </ul>
</div>

为左右按钮添加js，并绑定点击事件，通过改变".carousel>ul"的left值来使图片切换

(function(){

var carpiselUL =document.querySelector(".carousel>ul");

var leftBtu =document.querySelector(".carousel>span:nth-of-type(1)");//左按钮

var rightBtu =document.querySelector(".carousel>span:nth-of-type(2)");//右按钮

var carouselNum =0; //定义图片容器UL的left值

leftBtu. =function(){move("left")};

rightBtu. =function(){move("right")};

function move(leftRight){

if(leftRight =="left"){

console.log("左边按钮");

carouselNum = carouselNum -620; //620为展示窗口的宽度

var movePx = carouselNum +"px";

}

if(leftRight =="right"){

console.log("右边边按钮");

carouselNum = carouselNum +620;

var movePx = carouselNum +"px";

}

carpiselUL.style.left = movePx;

};

})();

从上图中我们可以发现存在2个问题，第一是图片切换的时候是瞬发的，并没有过渡效果。第二是当到底所有图片的最左或最右端时，继续点击就会出现没有图片了的情况。

首先我们来解决第一个问题，通过“transition”属性来获得过渡效果

先写一个类

.carouselTransition{/**过渡类**/

transition:left 1s;

}

通过js动态添加

carpiselUL.classList.add("carouselTransition");//添加类名，获得过度效果

第一个问题处理了，现在到第二个问题。

通过这种方式便可以得到轮播的效果，右边按钮相同

最后我只要将overflow属性添加上，在添加定时器去执行“左按钮”，轮播器也就完成了。

(function(){
    var carpiselUL = document.querySelector(".carousel>ul");
    var leftBtu = document.querySelector(".carousel>span:nth-of-type(1)");//左按钮
    var rightBtu = document.querySelector(".carousel>span:nth-of-type(2)");//右按钮
    var carouselNum = 0; //定义图片容器UL的left值
    leftBtu. = function(){move("left")};
    rightBtu. = function(){move("right")};
    function move(leftRight){
        if(leftRight == "left"){
            carpiselUL.classList.add("carouselTransition");//添加类名，获得过度效果
            carouselNum =  carouselNum - 620; //620为展示窗口的宽度
            var movePx = carouselNum + "px";
            carpiselUL.style.left = movePx;
            if(-carouselNum == 1860){//当达到第4张图片时，将其拖回第一张的位置
                carouselNum = 0;
                movePx = "0px";
                setTimeout(function(){
                    carpiselUL.classList.remove("carouselTransition");//移除类名，去掉过度效果
                    carpiselUL.style.left = movePx;
                }, 1000);

            };
        };
        if(leftRight == "right"){
            if(carouselNum == 0){
                carouselNum = -1860;
                carpiselUL.classList.remove("carouselTransition");//移除类名，去掉过度效果
                movePx = "-1860px";
                carpiselUL.style.left = movePx;
                setTimeout(function(){
                    carpiselUL.classList.add("carouselTransition");//添加类名，获得过度效果
                    carouselNum =  carouselNum + 620;
                    var movePx = carouselNum + "px";
                    carpiselUL.style.left = movePx;
                },100)
            }else{
                carpiselUL.classList.add("carouselTransition");//添加类名，获得过度效果
                carouselNum =  carouselNum + 620;
                var movePx = carouselNum + "px";
                carpiselUL.style.left = movePx;
            }
        };
    };
    var timeC =  setInterval(function(){
        move("left");
    },3000);
})();

点击查看更多内容