原生js实现轮播图

最新推荐文章于 2023-09-17 14:12:21 发布
最新推荐文章于 2023-09-17 14:12:21 发布
阅读量211 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l1621834733/article/details/109272983
版权

一、写入网页基本结构
body:
网页的最外部设置一个id为wrap的容器，取代body，这样方便我们做一些初始化
css:
初始化：
包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化
css设置：
根据图片数与图片宽度设置轮播图宽度
二、设置js逻辑
需要完成的功能有：
1、鼠标移入轮播图逐渐出现左右浮动块
2、点击浮动块切换图片
3、点击小圆点切换图片
4、切换图片同时切换小圆点
5、自动播放
6、鼠标移入轮播图自动播放停止、移出恢复自动播放
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    ul,li{
        list-style: none;
    }
    img{
        display: block;
    }
    input{
       outline: none;
    }
    html,body{
        height: 100%;
        overflow: hidden;
    }
    .content{
        position: absolute;
        top: 0;
        left: 0;
    }
    .banner{
        width: 600px;
        height: 400px;
        position: relative;
        margin: 50px auto;
        overflow: hidden;
    }
    .banner .bannerList{
        position: absolute;
        left:-600px;
        top: 0;
        width: 4800px;
        height: 100%;
    }
    .banner .bannerList li{
        float: left;
        width: 600px;
        height: 400px;
       
    }
    .banner .bannerList li img{
        height: 100%;
        width: 100%;
    }
    .banner .left,.banner .right{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 50px;
        border: solid 2px gray;
        font-size:30px;
        text-align: center;
        line-height: 50px;
        color: rgb(255, 255, 255);
        opacity: 0;
        transition: 1000ms;
    }
    .banner .left{
        left: 0px;
    }
    .banner .right{
        right: 0px;
    }
    .banner .point{
        position: absolute;
        bottom: 30px;
        left:50%;
        transform: translateX(-50%);
    }
    .banner .point li{
        float: left;
        width: 15px;
        height: 15px;
		border-radius: 50%;
		background-color: gray;
        margin: 5px;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var bannerLeft=document.querySelector('.banner .left');
        var bannerRight=document.querySelector('.banner .right');
        var banner=document.querySelector('.banner')
        var bannerList=document.querySelector('.banner .bannerList')
        var liList=document.querySelectorAll('.banner .bannerList li')
        var pointList=document.querySelectorAll('.banner .point li')
        var start=-600;


            timer2=setInterval(function(){              //设置定时器，自动播放
            var a=30;
            var index=bannerList.offsetLeft/-600+1;
            if(bannerList.offsetLeft==-4200){
                    bannerList.style.left=-600+'px'         //无缝操作
                    index=2;
                }
                if(bannerList.offsetLeft==-3600){
                    index=1;
                }
            for(var i=0;i<pointList.length;i++){
                   pointList[i].style.backgroundColor='grey'
               }
               pointList[index-1].style.backgroundColor='red';
            timer3=setInterval(function(){
                a=a-1
                bannerList.style.left=bannerList.offsetLeft-20+'px';
                
                if(a==0){
                    clearInterval(timer3)
                }
            },
                30)
                if(bannerList.offsetLeft==-4200){
                    bannerList.style.left=-600+'px';
                } 
        },4000)


        // 创建一个移入出现函数
        banner.addEventListener('mouseover',occur)
        function occur(){
        bannerLeft.style.opacity=1;         //移入逐渐出现
        bannerRight.style.opacity=1;        
        clearInterval(timer2);               //移入取消自动播放
    }
        banner.addEventListener('mouseout',function(){
            bannerLeft.style.opacity=0;
            bannerRight.style.opacity=0;        //移出消失
            timer2=setInterval(function(){          //移出恢复自动播放
            var a=30;
            timer3=setInterval(function(){
                a=a-1
                bannerList.style.left=bannerList.offsetLeft-20+'px';
                
                if(a==0){
                    clearInterval(timer3)
                }
            },
                30)
                if(bannerList.offsetLeft==-4200){
                    bannerList.style.left=-600+'px';
                }
        },4000)

        })
        //设置左右浮动块点击变色以及滚动
        function colorChange(){
            this.style.color='black';
            if(this.className=='right'){        //判断是哪边被点击
                    var index=bannerList.offsetLeft/-600+1;
                    var a=30;
                    timer=setInterval(function(){       //点击浮动块切换图片
                    a=a-1;
                    bannerList.style.left=bannerList.offsetLeft-20+'px';
                    if(a!=0){
                        bannerRight.removeEventListener('mousedown',colorChange)
                        bannerLeft.removeEventListener('mousedown',colorChange)
                        
                    }
                    if(a==0){
                        clearInterval(timer);
                        bannerRight.addEventListener('mousedown',colorChange)
                        bannerLeft.addEventListener('mousedown',colorChange)
                    }
                },30)
                if(bannerList.offsetLeft==-4200){
                    bannerList.style.left=-600+'px'
                    index=2;
                }
                if(bannerList.offsetLeft==-3600){
                    index=1;
                }
               for(var i=0;i<pointList.length;i++){
                   pointList[i].style.backgroundColor='grey'
               }
               pointList[index-1].style.backgroundColor='red';
            }
            else{
                    var a=30;
                    var index=bannerList.offsetLeft/-600-1;
                    timer=setInterval(function(){
                    a=a-1;
                    bannerList.style.left=bannerList.offsetLeft+20+'px';
                    if(a!=0){
                        bannerLeft.removeEventListener('mousedown',colorChange)
                        bannerRight.removeEventListener('mousedown',colorChange)
                    }
                    if(a==0){
                        clearInterval(timer);
                        bannerLeft.addEventListener('mousedown',colorChange)
                        bannerRight.addEventListener('mousedown',colorChange)
                    }
                },30)
                if(bannerList.offsetLeft==0){
                    bannerList.style.left=-3600+'px'
                    index=5;
                }
                if(bannerList.offsetLeft==-600){
                    index=6;
                }
                for(var i=0;i<pointList.length;i++){
                   pointList[i].style.backgroundColor='grey'
               }
               pointList[index-1].style.backgroundColor='red';
            }
        }
        function colorReturn(){
            this.style.color='white'
        }
        bannerLeft.addEventListener('mousedown',colorChange)
        bannerRight.addEventListener('mousedown',colorChange)
        bannerLeft.addEventListener('mouseup',colorReturn)
        bannerRight.addEventListener('mouseup',colorReturn)
        for(var i=0;i<pointList.length;i++){
            pointList[i].onmousedown=function(){
                for(var i=0;i<pointList.length;i++){
                    pointList[i].style.backgroundColor='gray'
                }
                this.style.backgroundColor='red';
                for(var b=0;b<pointList.length;b++){
                    if(pointList[b].style.backgroundColor==this.style.backgroundColor){
                        var a=30;
                        var step=-(b+1)*600-bannerList.offsetLeft;
                        timer1=setInterval(function(){
                        a=a-1;
                        bannerList.style.left=bannerList.offsetLeft+step/30+'px';
                        if(a!=0){
                        bannerLeft.removeEventListener('mousedown',colorChange)
                        bannerRight.removeEventListener('mousedown',colorChange)

                    }
                        if(a==0){
                            clearInterval(timer1)
                            bannerLeft.addEventListener('mousedown',colorChange)
                            bannerRight.addEventListener('mousedown',colorChange)
                        }
                     },20)
                    }
                }
            }
        }
        
    }
    </script>
</head>
<body>
    <div id="wrap">
        <!-- 写出轮播图框架 -->
        <div class="banner">
            <ul class="bannerList">
                <li>
                    <img src="./img/james6.jpeg">
                </li>
                <li>
                    <img src="./img/james1.jpg">
                </li>
                <li>
                    <img src="./img/james2.jpg">
                </li>
                <li>
                    <img src="./img/james3.jpg">
                </li>
                <li>
                    <img src="./img/james4.jpg">
                </li>
                <li>
                    <img src="./img/james5.jpeg">
                </li>
                <li>
                    <img src="./img/james6.jpeg">
                </li>
                <li>
                    <img src="./img/james1.jpg">
                </li>
            </ul>
             <!-- 左右两个箭头 -->
             <span class="left"> < </span>
            <span class="right"> > </span>
             <!-- 添加小圆点 -->
             <ul class="point">
                 <li style="background-color: red;"></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
             </ul>
        </div>
    </div>
    
</body>
</html>

其中，将图片替换为其他图片可以实现不同的轮播图，值得一提的是，六张图片的轮播图需要放八张图，第八张与第二张一致，第一张与第七张一致，真正呈现出来的仅仅是第二张到第七张

l1621834733
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现轮播图
Andrew_SJ的博客
06-24 1万+
本文参考 浅墨若寒-js实现轮播图效果 大体思路： 先创建一个div，限定其宽度和高度，overflow：hidden，且设置其position为relative。然后创建一个装图片的div，宽度为所有图片的总宽度，且设置其position为absolute，并且使其中的内容浮动，这样所有的图片就处于一行中。然后为了实现无缝滚动，所以需要在首尾分别添加一张过渡图片。 先添加两个按钮， 使其可以手动轮播，然后只需要添加一个定时器使其朝一个方向自动轮播即可，因为用户有时需要查看详情，所以当鼠标进入时就clea
JS实现轮播图的三种简单方法。
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
JS实战——轮播图
热门推荐
qq_65715980的博客
07-06 2万+
html+css+js实现目前各大网站上轮播图的效果，可以利用我的代码稍加改装就能实现想要的效果。
JS实现轮播图(超详细代码注释)
m0_56836274的博客
08-24 2万+
html，css,javasript实现轮播图,超详细代码注释。实现的功能有：自动轮播，鼠标放上去停止轮播，鼠标离开自动轮播，点击下方小圆圈实现图片切换，点击左右按钮实现切换
JavaScript之手把手教你做轮播图
跳探戈的小龙虾的博客
04-08 1万+
我教你做的轮播图包括但不限于以下功能： 平滑滚动、定时滚动 + 点击滚动、防鼠标连续点击、第一张图与最后一张图无缝处理 如果你是在找轮播图怎么做的小白，那么恭喜你，找到我这儿，不用再换了，认认真真看完这篇文章，我保证你能做一个完整的轮播图。 而且我会以面向小白的简单通俗讲解，带大家做完轮播图，保证全程没有盲点。 不过前提是，有简单的jQuery基础和会用setTimeout()和setInterval()函数，这两个要求可以在我的其他博客里学习到。
原生js实现轮播图特效
11-21
鼠标不经过轮播图，轮播图也会自动播放图片。 ​ 6.鼠标经过，轮播图模块， 自动播放停止。 此文章的代码为一个完整的轮播图的实现代码，复制即可运行 实现效果由于大小问题无法上传，可自行观看淘宝或京东首页轮播...
原生js实现无缝轮播图
10-15
主要为大家详细介绍了原生js实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现图片轮播切换效果
10-20
主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现轮播图（含注释）
02-23
本代码主要使用js实现网页前端上常用轮播图，代码中含有清晰注释。
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
JS轮播图详解
最新发布
weixin_75154342的博客
09-17 1795
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
原生js实现轮播图的两种方法
我是一只蘑菇17的博客
12-22 2141
一.原生js实现幻灯片效果（直接跳转法） 1.分析需求： 幻灯片的效果就是在一个可视区域里面，若干个图片进行交替出现，像在下面的图中，可视区域中的图是轮流出现的。   那么如何来实现这个效果呢，我百度了一下大部分都是什么调节left的大小，我没看懂，于是自己来动手来思考怎么做。 首先，刚开始的时候，这个区域就只放一张图，等到需要切换的时候就把这个img的src属性修改为需要展示图片所在的位置...
js轮播图 最简单代码
m0_54589634的博客
10-24 2万+
js轮播图 最简单代码 今天来分享一篇js最简单轮播图轮播图，用最简单的代码实现： 首先，建立一个HTML文件，插入img标签，这里我们定义图片id为pic 然后使用document.getElementByid()获取img标签的id，并且定一个一个变量obj储存对象 把轮播的图片设置数字.JPG(方便插入) 定义一个全局变量num，这里我们初始图片为0.JPG。num初始值可以设置为0 创建轮播函数，使用obj变量设置img标签插入的图片，随着num数值的变化切换图片，当切换到最后一张图片时，num重
代码实现原生js写轮播图
04-12
好的，可以直接回答您的问题。 要实现一个原生JS写的轮播图，可以通过以下步骤来实现： 1. 创建一个图片容器，用于显示轮播图。 2. 定义一个显示当前轮播图的索引变量，初始值为0。 3. 定义一个定时器，定时将图片索引+1，达到轮播效果。 4. 在定时器中，判断当前图片索引是否等于轮播图的数量，如果是则重置为0。 5. 在定时器中，更新图片容器的src属性为当前图片的URL。 6. 在轮播图下方添加一个切换按钮，可以点击切换到任意一张图片。 7. 通过监听按钮的点击事件，更新当前图片索引，并更新图片容器。 以上是一个简单的轮播图的实现方法，具体实现可以根据实际需求进行调整。希望能对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值