原生js实现轮播图

最新推荐文章于 2024-04-02 18:03:14 发布

sslcsq

最新推荐文章于 2024-04-02 18:03:14 发布

阅读量306

点赞数 2

文章标签： js 原生js

本文链接：https://blog.csdn.net/sslcsq/article/details/107960850

版权

一.原生js实现轮播效果
分析需求：
幻灯片的效果就是在一个可视区域里面，若干个图片进行交替出现，像在下面的图中，可视区域中的图是轮流出现的。
在这里插入图片描述

那么如何来实现这个效果呢，我百度了一下大部分都是什么调节left的大小，我没看懂，于是自己来动手来思考怎么做。

首先，刚开始的时候，这个区域就只放一张图，等到需要切换的时候就把这个img的src属性修改为需要展示图片所在的位置。

那么如何来实现这个功能呢？

首先来定义一个全局数组用来存放所有的图片的位置，还有一个全局变量num用来记载这次应该轮到第几个图片位置出现在该区域

var num = 0;
var arrUrl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];

接下来写切换函数，切换函数的主要功能就是将img的src属性改到当前需要的位置。

function changeImg(){
    img.src = arrUrl[num]; // 修改图片的src位置
    // 如果图片下方有需要显示的圆点就在这里修改，或者其他对应的信息也在这里修改
    for(var i = 0;i<arrUrl.length;i++){
        li[i].className = "";
        }
    li[num] = "active";
}

接下来分析需要切换的事件

首先是轮播切换，就是一个定时器，定时的调用这个切换函数，并且这里需要注意num的值，因为num切换到最后一张，下一张就应该是第一张。

接下来是点击左右切换按钮，左切换按钮要留意切换到第一张的时候，需要将下一张定义为最后一张，右切换按钮需要留意最后一张，下一张是第一张。

最后是小圆点点击跳转到对应的图片。

按照上面的思路，首先来写轮播切换，轮播切换无非就是一个定时器，定时的切换这个图片，所以我们来写一个定时切换的函数

定义一个全局变量定时器（当需要停止定时切换的时候就清除，需要继续的时候就继续调用）

var timer = null;//定义一个空对象来存放定时器
 
function autoPlay(){
 
    timer = setInterval(function(){
 
        num++;//切换下一张的num
 
        num %=arrUrl.length;//这里是关键，循环播放图片的关键
 
        },2000);//定时器
 
}

这里就是定时器的方法实现了。

只要在全局函数中调用就行了

setTimeout(autoPlay,1000);//延时播放，这样就不用一刷新页面立马切换图片。

接下来就是左右切换图片的实现了。左边切换的时候num–，但是要注意num=0的时候，下一场num=arr.Url.length，右切换则相反。

left.onclik = function(){
    num--;
    if(num == -1){
        num = arrUrl.length-1;
    }
    changeImg();//调用切换函数
}
right.onclik = function(){
    num++;
    if(num == arrUrl.length){
        num =0;
    }
    changeImg();//调用切换函数
}

当图片下面的小圆点点击跳到对应的图片。这里需要为每个原点的index属性添加一个值，就是它对应的i的值，这样每次点击小圆点，直接将img.src = arrUrl[this.index]就可以了。

for(i = 0;i<arrUrl.length;i++){
    li[i].index = i;
        li[i].onclick = function(){
          num = this.index;
            changeImg();
        }
}

到了这里，基本都完成了，再添加一个鼠标移入清除定时器，鼠标移出继续调用就可以了

content.onmouseover = function(){
        clearInterval(timer);
    }
contentonmouseout= aotoPlay;

全部代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sslcsq</title>
</head>

<style>
    .container {
        width: 100%;
        height: 500px;
        position: relative;
    }
    
    .content {
        width: 900px;
        height: 450px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
    }
    
    .slider-img {
        width: 900px;
        height: 450px;
    }
    
    .slider-img img {
        width: 900px;
        height: 450px;
        display: block;
    }
    
    .left {
        margin-top: -300px;
        margin-left: 50px;
        width: 100px;
        height: 100px;
    }
    
    .left img,
    .right img {
        width: 100px;
        height: 100px;
    }
    
    .right {
        margin-top: -100px;
        margin-right: 50px;
        float: right;
        width: 100px;
        height: 100px;
    }
    
    .dot {
        position: relative;
        top: 23%;
        left: 43%;
        width: 50%;
    }
    
    .dotul {
        width: 450px;
    }
    
    .dotul li {
        width: 20px;
        height: 20px;
        background-color: seagreen;
        list-style: none;
        float: left;
        border-radius: 20px;
        margin-left: 15px;
        z-index: 999;
        cursor: pointer;
    }
    
    .active {
        background-color: orangered !important;
    }
</style>

<body>
    <div class="container" id="contaner">
        <div class="content" id="content">
            <div class="slider-img" id="slider">
                <a href="javascript:;">
                    <img src="../img/1.jpg" alt="1.jpg" id="img">
                </a>
            </div>
        </div>
        <div class="btn">
            <div class="left" id="left">
                <a href=" ###"><img src="../img/left.jpg"></a>
            </div>
            <div class="right" id="right">
                <a href=" ###"><img src="../img/right.jpg"></a>
            </div>
        </div>
        <div class="dot">
            <ul id="ul" class="dotul">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
<script>
    //首先要获取元素  
    var container = document.getElementById("container");   
    var content = document.getElementById("content");  
    var slider = document.getElementById("slider");   
    var img = document.getElementById("img");   
    var ul = document.getElementById("ul");  
    var li = document.getElementsByTagName("li");  
    var left = document.getElementById("left");  
    var right = document.getElementById("right");    
    var num = 0;  
    var timer = null;    
    //图片位置 
    var arrUrl = ["../img/1.jpg", "../img/2.jpg", "../img/3.jpg", "../img/4.jpg", "../img/5.jpg"];   
    left.onclick = function(ev) {       
        num--;      
        if (num == -1) {            
            num = arrUrl.length - 1;
            //如果到了第一张，返回最后一张         
        }      
        changeImg();    
    };   
    right.onclick = function(ev) {        
        num++;        
        if (num == arrUrl.length) {            
            num = 0; //如果是最后一张，则返回第一张           
        }       
        changeImg();    
    };
    //点击小圆点跳转到对应的图片    
    for (var i = 0; i < arrUrl.length; i++) {           
        li[i].index = i;          
        li[i].onclick = function(ev) {               
            num = this.index;               
            changeImg();           
        }    
    }    
    setTimeout(autoPlay(), 1000); //延迟1秒执行自动切换
    //鼠标移入清除定时器，鼠标移出恢复
    //中间banner
    content.onmouseover = function(ev) {
        clearInterval(timer);    
    };    
    content.onmouseout = autoPlay;    
    // left
    left.onmouseover = function(ev) {
        clearInterval(timer);    
    };    
    left.onmouseout = autoPlay;    
    //right
    right.onmouseover = function(ev) {
        clearInterval(timer);    
    };    
    right.onmouseout = autoPlay;    

    //图片切换函数
    function changeImg() {        
        img.src = arrUrl[num]; //改变图片src位置      
        for (var i = 0; i < li.length; i++) { //改变原点样式            
            li[i].className = "";        
        }        
        li[num].className = "active";    
    }
    //设置定时器    
    function autoPlay() {       
        timer = setInterval(function() {            
            num++;           
            num %= arrUrl.length;
            changeImg();        
        }, 2000);    
    }
</script>

</html>

最终效果
在这里插入图片描述

sslcsq

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现轮播图

一.原生js实现轮播效果分析需求：幻灯片的效果就是在一个可视区域里面，若干个图片进行交替出现，像在下面的图中，可视区域中的图是轮流出现的。那么如何来实现这个效果呢，我百度了一下大部分都是什么调节left的大小，我没看懂，于是自己来动手来思考怎么做。首先，刚开始的时候，这个区域就只放一张图，等到需要切换的时候就把这个img的src属性修改为需要展示图片所在的位置。那么如何来实现这个功能呢？首先来定义一个全局数组用来存放所有的图片的位置，还有一个全局变量num用来记载这次应该轮到第几个图片位置出现
复制链接

扫一扫