排他思想实现轮播图下面小点的变化

╰+哭是因爲堅強的太久メ 2023-07-03 02:59 19阅读 0赞

排他思想:先排除其他人,在设置自己的样式.  
成品图![在这里插入图片描述][20200201122347547.gif]  
HTML加css代码  
样式自己设置喜欢的就行

<style>
        .box{ 
            /* border: 1px solid red; */
            margin: 100px auto;
            width: 500px;
            height: 100px;
            background-color: black;
        }
       
        li{ 
            margin-left: 6px;
            margin-top: 80px;
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 1px solid #ccc;
            border-radius: 50px;
        }
    </style>
    
    HTML模块
      <div class = "box">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

<script>
            var lis = document.getElementsByTagName("li");
            for(var i=0; i<lis.length; i++){ 
            lis[i].onclick = function(){ 
               for(var i=0; i<lis.length; i++){ 
                // 先清除样式
                    lis[i].style.backgroundColor = "";
               }
            // 再加上自己的样式
                this.style.backgroundColor = "white";
            }
            }
        </script>

就这样一个简单的轮播图下面的转图片的样式就做好了,  
接下来就是绑定图片就可以达到轮播图的效果了.  
案例很快就会出.  
谢谢

[20200201122347547.gif]: https://img-blog.csdnimg.cn/20200201122347547.gif

发表评论取消回复

表情：

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

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

相关阅读

相关 js实现点击轮播图

效果图今天讲下如何利用js做个点击操作的轮播图，效果图如下，因为无法传视频，只能截图了，代码在下面讲解，需要可以自己打出来运行。 ![在这里插入图片描述][wate

谁践踏了优雅/ 2023年07月12日 05:12/ 0 赞/ 32 阅读

相关排他思想实现轮播图下面小点的变化

排他思想:先排除其他人,在设置自己的样式. 成品图![在这里插入图片描述][20200201122347547.gif] HTML加css代码样式自己设置喜欢的就

╰+哭是因爲堅強的太久メ/ 2023年07月03日 02:59/ 0 赞/ 20 阅读

相关排他思想

1.先干掉其他人 2.留下我自己（设置想要的效果） <button>按钮1</button> <button>按钮2</button>

缺乏、安全感/ 2023年06月24日 04:53/ 0 赞/ 72 阅读

相关 Jquery 排他思想

<div id="mydiv"> <button>按钮</button> <button>按钮</button> <button>按钮</

本是古典何须时尚/ 2023年01月09日 15:58/ 0 赞/ 179 阅读

相关 CSS 实现轮播图的导航点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

╰+攻爆jí腚メ/ 2022年12月26日 00:54/ 0 赞/ 145 阅读

相关 html点击小图轮播图,使用纯CSS实现点击轮播图效果，无js。

使用纯CSS实现图片轮播效果首先我们来看一下所实现轮播图的最终效果： ![03d7fc1b7850][] 轮播图效果接下来为html+css代码部分：以下为H

r囧r小猫/ 2022年10月07日 08:52/ 0 赞/ 598 阅读

相关轮播图的实现

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

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

相关轮播图的实现

简单轮播图实现（H5+CS3+JS&JQuery）最终效果图如下：每2000毫秒自动轮播，鼠标划入显示左右按钮；进行手动点击按钮左右切换。划出隐藏按钮并继续进行

阳光穿透心脏的1/2处/ 2022年04月02日 13:52/ 0 赞/ 295 阅读

相关轮播图的实现

轮播图的实现 <view> <swiper class='swipers' indicatorDots='true' interval=

清疚/ 2021年09月17日 00:20/ 0 赞/ 621 阅读

相关小程序轮播图

方法一： js代码 Page({ data: { //轮播图配置 autoplay: t

傷城~/ 2021年08月14日 00:13/ 0 赞/ 531 阅读