dom实现轮播图

亦凉 2023-06-22 05:30 9阅读 0赞

轮播图是网站设计常用的一种功能，请看代码。  
css样式：  
.wraper\{  
width: 300px;  
height: 200px;  
position: relative;  
\}  
.wraper>img\{  
display: none;  
width: 300px;  
height: 200px;  
\}  
\#pre\{  
width: 30px;  
height: 50px;  
background-color: rgba(100,100,100,0.8);  
color: \#ffffff;  
position: absolute;  
left: 0;  
top: calc(50% - 25px);  
text-align: center;  
line-height: 50px;  
\}  
\#next\{  
width: 30px;  
height: 50px;  
background-color: rgba(100,100,100,0.8);  
color: \#ffffff;  
position: absolute;  
right: 0;  
top: calc(50% - 25px);  
text-align: center;  
line-height: 50px;  
\}  
.wraper>.active\{  
display: block;  
\}  
.circle\{  
position: absolute;  
bottom: 20px;  
left: calc(50% - 60px);  
\}  
span\{  
width: 30px;  
height: 30px;  
display: inline-block;  
border-radius: 50%;  
background-color: rgba(100,100,100,0.8);  
\}  
.active\_circle\{  
background-color: \#ccc;  
\}

html部分：

<img src="../img/img/1.jpg" class="active" alt="">
                <img src="../img/img/2.jpg" alt="">
                <img src="../img/img/3.jpg" alt="">
                <img src="../img/img/4.jpg" alt="">
                <div id="pre"> < </div>
                <div id="next"> > </div>
                <div class="circle">
                <span class="active_circle"></span>
                <span></span>
                <span></span>
                <span></span>

js部分：

var spans = document.getElementsByTagName('span')
            var pre = document.getElementById('pre')
            var next = document.getElementById('next')
            // var imgs=document.querySelectorAll('.wraper>img')
            var imgs = document.getElementsByTagName('img')
            //声明计数器显示有图片索引值
            var count = 0
            next.onclick = function () {
                ++count
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].className = ''
                    spans[i].className = ''
                }
                if (count >= 4) {
                    count = 0
                }
                imgs[count].className = 'active'
                spans[count].className = 'active_circle'
            }
    
            pre.onclick = function () {
                --count
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].className = ''
                    spans[i].className = ''
                }
                if (count < 0) {
                    count = 3
                }
                imgs[count].className = 'active'
                spans[count].className = 'active_circle'
            }
    
            //给小求添加属性i 为span索引值
            for (var i = 0; i < spans.length; i++) {
                spans[i].i = i //记录用户点击哪个小圆点
                spans[i].onclick = function () {
    
                    //清空样式
                    for (var j = 0; j < spans.length; j++) {
                        spans[j].className = ''
                        imgs[j].className = ''
                    }
                    var index = this.i  //保存当前点击源点索引值
                    count = index  //保证上一个下一个，以当前元素为基础进行count++ --
                    this.className = 'active_circle'
                    imgs[index].className = 'active'
                }
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 dom实现轮播图

轮播图是网站设计常用的一种功能，请看代码。 css样式： .wraper\{ width: 300px; height: 200px; position:

亦凉/ 2023年06月22日 05:30/ 0 赞/ 10 阅读

相关 JavaScript Dom实现轮播图原理和实例

想要制作一个轮播图我们要先弄清楚他的原理，如何能让图片自右向左滑动？让我们想一想生活中有没有类似的东西，比如电影胶片。我们可以创建一个块作为投影区，创建一个列表作为

不念不忘少年蓝@/ 2022年10月30日 11:26/ 0 赞/ 131 阅读

相关 html vue轮播图,webpack+Vue实现轮播图

前言本来如果只是想做个轮播图的话不太需要这么麻烦的构建webpack项目，但是我的目的不是只做个轮播图这么简单，主要是想用webpack搭建一个vue项目，然后在里面实现了

迈不过友情╰/ 2022年10月19日 01:39/ 0 赞/ 261 阅读

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 343 阅读

相关轮播图的实现

轮播图的实现, 已封装轮播轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见, 所以有必要理解其中的原理轮播图HTML中应包含几个部分?

深碍√TFBOYSˉ_/ 2022年05月22日 22:54/ 0 赞/ 261 阅读

相关 JavaScript实现轮播图

Html代码 <body> <div class="header" id="header">

分手后的思念是犯贱/ 2022年02月03日 19:49/ 0 赞/ 366 阅读

相关 jQuery实现轮播图

先展示一下轮播图的终结版截图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

淩亂°似流年/ 2021年12月14日 09:45/ 0 赞/ 503 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 707 阅读

相关轮播图简单实现

如何实现轮播图？根据视频[尚硅谷JavaScript视频][JavaScript]整理得到。思路： ![在这里插入图片描述][2019082110244071

Bertha 。/ 2021年10月24日 05:26/ 0 赞/ 538 阅读

相关操作DOM实现轮播图

一、思路分析 1.创建一个img标签,而后再创建一个img标签 2.移动图片 3.移除移动出来的左边的一张. 4.而后接着创建,移动,删除,循环

╰半夏微凉°/ 2021年09月15日 11:24/ 0 赞/ 286 阅读