前端学习内容

最新推荐文章于 2024-10-03 20:14:40 发布

云朵里有星星

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量345

点赞数

分类专栏：前端学习文章标签：前端 bootstrap jquery

本文链接：https://blog.csdn.net/qq_63897791/article/details/122903095

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

轮播图
排他思想

轮播图

利用bootstrap和jQuery实现轮播效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery-3.6.0.js"></script>//jQuery必须在bootstrap.js文件之前引入
    <script src="bootstrap.js"></script>

</head>
<body>
<div id="slidershow" class="carousel slide" data-ride="carousel" data-interval=2000 data-pause="hover"
     data-wrap="true"
     style="width: 343px;height: 431px; margin-left:auto; margin-right:auto;">
    <!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
        <li class="active" data-target="#slidershow" data-slide-to="0"></li>
        <li data-target="#slidershow" data-slide-to="1"></li>
        <li data-target="#slidershow" data-slide-to="2"></li>
        <li data-target="#slidershow" data-slide-to="3"></li>
        <li data-target="#slidershow" data-slide-to="4"></li>
        <li data-target="#slidershow" data-slide-to="5"></li>
        <li data-target="#slidershow" data-slide-to="6"></li>
        <li data-target="#slidershow" data-slide-to="7"></li>
        <li data-target="#slidershow" data-slide-to="8"></li>
        <li data-target="#slidershow" data-slide-to="9"></li>
    </ol>
    <!--设置轮播的图片-->
    <div class="carousel-inner">
        <div class="item active">
            <a href="" title="虎虎新春来签到"><img src="images1/lun1.jpeg" alt="cat1"></a>
        </div>
        <div class="item">
            <a href="" title="职业改版"><img src="images1/lun2.jpeg" alt="cat2"></a>
        </div>
        <div class="item">
            <a href="" title="阿拉德华丽仓库礼包"><img src="images1/lun3.jpeg" alt="cat3"></a>
        </div>
        <div class="item">
            <a href="" title="魂异界-彼方次元"><img src="images1/lun4.jpeg" alt="cat4"></a>
        </div>
        <div class="item">
            <a href="" title="神枪手(男)第五转职:合金战士"><img src="images1/lun5.jpeg" alt="cat5"></a>
        </div>
        <div class="item">
            <a href="" title="甜蜜传讯,为爱充电!"><img src="images1/lun6.jpeg" alt="cat6"></a>
        </div>
        <div class="item">
            <a href="" title="圣者遗物箱限定道具"><img src="images1/lun7.jpeg" alt="cat7"></a>
        </div>
        <div class="item">
            <a href="" title="机智的畅玩探索 第二季"><img src="images1/lun8.jpeg" alt="cat8"></a>
        </div>
        <div class="item">
            <a href="" title="圣者遗物箱限定道具"><img src="images1/lun9.jpeg" alt="cat9"></a>
        </div>
    </div>
</div>

</body>
</html>

在这里插入图片描述
效果:点击下方圆圈切换图片,鼠标移入时事件停止.

排他思想

利用JS实现
先清除其他部分的样式,再给当前部分设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
    var butn = document.querySelectorAll('button');//获取所有按钮
    for (var i = 0; i < butn.length; i++) {
        butn[i].onclick = function () {//给按钮绑定点击事件
            for (var i = 0; i < butn.length; i++) {
                butn[i].style.backgroundColor='';//将其他元素样式清除
            }
            this.style.backgroundColor='yellow';给当前元素设置样式
        }
    }
</script>
</body>
</html>