一个页面有多个轮播图时结局办法

最新推荐文章于 2021-06-11 11:54:26 发布
最新推荐文章于 2021-06-11 11:54:26 发布
阅读量2k 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42329594/article/details/88799608
版权

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <script src="js/jquery-1.11.0.js" type="text/javascript"> </script>

<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/base.css"/>

    <style type="text/css">

      .website_bg{

        height: 300px;

        width:750px ;

        margin-top: 5px;

        margin-bottom: 20px;

        margin: 0 auto;

      }

      #carousel-example-generic{

        height: 300px!important;

        width: 750px!important;

      }

      .carousel-inner .item{

        height: 300px!important;

        width: 750px!important;

      }

      .carousel-inner .item img{

        height: 100%!important;

        width: 100%!important;

      }

        

    </style>

    

  </head>

  <body>

<--第一个轮播图-->

     <div class="website_bg" style="margin-bottom:50px;" >

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

         <!-- Indicators -->

                  <ol class="carousel-indicators">

                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>

                  </ol>

        

         <!-- Wrapper for slides -->

                <div class="carousel-inner" role="listbox">

                  <div class="item item active">

                    <img src="img/bb01c11c585948c9193b087909250459.jpg" alt="...">

                    <div class="carousel-caption"> </div>

                  </div>

                  <div class="item">

                    <img src="img/dd3d1aa0dae87d7a5de4dd1a6d3a7efc.jpg" alt="...">

                    <div class="carousel-caption"></div>

                  </div>

                  <div class="item">

                    <img src="img/e3a831b413faedbea0065f018d180df0.jpg" alt="...">

                    <div class="carousel-caption"></div>

                  </div>

               </div>

        

         <!-- Controls -->

                  <a class="left carousel-control frist" href="#carousel-example-generic" role="button" data-slide="prev">

                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

                    <span class="sr-only">Previous</span>

                  </a>

                  <a class="right carousel-control frist" href="#carousel-example-generic" role="button" data-slide="next">

                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                    <span class="sr-only">Next</span>

                  </a>

         </div>

       </div>

      

<!-- 第二个轮播图 -->

 

       <div class="website_bg" >

<div id="mybanner" class="carousel slide" data-ride="carousel">

         <!-- Indicators -->

                  <ol class="carousel-indicators">

                    <li data-target="#mybanner" data-slide-to="0" class="active"></li>

                    <li data-target="#mybanner" data-slide-to="1"></li>

                    <li data-target="#mybanner" data-slide-to="2"></li>

                  </ol>

        

         <!-- Wrapper for slides -->

                <div class="carousel-inner" role="listbox">

                  <div class="item item active">

                    <img src="img/bb01c11c585948c9193b087909250459.jpg" alt="...">

                    <div class="carousel-caption"> </div>

                  </div>

                  <div class="item">

                    <img src="img/dd3d1aa0dae87d7a5de4dd1a6d3a7efc.jpg" alt="...">

                    <div class="carousel-caption"></div>

                  </div>

                  <div class="item">

                    <img src="img/e3a831b413faedbea0065f018d180df0.jpg" alt="...">

                    <div class="carousel-caption"></div>

                  </div>

               </div>

        

         <!-- Controls -->

                  <a class="left carousel-control second" href="#mybanner" role="button" data-slide="prev">

                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

                    <span class="sr-only">Previous</span>

                  </a>

                  <a class="right carousel-control second" href="#mybanner" role="button" data-slide="next">

                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                    <span class="sr-only">Next</span>

                  </a>

         </div>

</div>

  </body>

  <script type="text/javascript">

  </script>

</html>

当一个页面引用bootstrap中的轮播图出现多个的时候，会相互影响，结局办法如下：

1，修改引用轮播图的id

修改为

2,将ol 下的li 的data-target 后面的也修改为 #mybanner

3,将下面a标签的  href值也修改为#mybanner

这样就不会相互影响了

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

panpwpd
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html中多个图片轮播代码怎么写,Html5如何快速在页面中写出多个轮播图效果
weixin_42513448的博客
05-31 1711
我们在做项目的过程中，有时候客户需求要求你在同一个页面中，写几个不同样式的轮播图效果，那么如何快速实现呢？(要知道若果你每个轮播图都要用原生javascript写的话，会很麻烦，代码也不够简洁)这里我们就可以借助插件来实现这一功能，swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明：小米防丢器 遥控自拍解放双手、释放激情解放你的双手，给你充分的空间摆...
页面实现多个图片轮播功能demo
01-03
用原生js改写，实现一个页面上显示多个图片轮播功能，调用同一函数，减少代码冗余
bootstrap一个页面两个轮播的解决办法
03-18
通过学习bootstrap这个框架，学会了如何在一个html页面中加载两个轮播。
一个html页面多个轮播图,关于JS面向对象实现一张页面多个轮播图的问题。
weixin_39843338的博客
06-11 475
无法自动播放，目前只想先把一个轮播完成，再完成其他的，小白一枚第一次写对象，求大神告知window.onload=function(){new Slide('slide1');}function Slide(id){_this=this;var box=document.getElementById(id); //总容器this.ul=box.getE...
一个个页面中多个焦点图片轮播的实现
葵花传奇
04-06 2301
编写一个焦点图轮播组件
一个html页面多个轮播图,Vue在同一个页面制作多个轮播图
weixin_35815640的博客
06-11 1500
其实很简单，只需要为每个轮播图设置不同的class类和不同的options名即可。1.设置不同的class类和options名//轮播图1// class="swiper-container swiper-pagination1"// :options="swiperOptionSwiper1" //轮播图2//class="swiper"//:options="swiperOpt...
bootstrap一个页面多个轮播的解决办法
08-27
然而，当你在一个页面上需要展示多个轮播时，可能会遇到一些问题，因为默认配置下，Bootstrap的轮播组件可能会互相干扰。本篇文章将详细讲解如何在同一个页面上实现多个独立的轮播实例。 首先，理解Bootstrap轮播的...
仿搜狐女人频道FLASH图片切换效果
09-06
本文主要介绍的是如何创建一个仿搜狐女人频道的FLASH图片切换效果，通过JavaScript实现动态图片轮播。在实际应用中，这样的效果能够提升网站的视觉吸引力，吸引用户的注意力，尤其适用于时尚、娱乐、媒体等领域的...
JS编写兼容IE6,7,8浏览器无缝自动轮播
12-02
项目要求页面兼容IE6,7,8等浏览器，我们可能会遇到这个轮播效果，轮播板块要求：无限循环、自动轮播和手动切换功能，每一次滚动一小格，网上有很多这类插件，例如:swiper等！ 但是很多都是不兼容IE6,7,8这些低级...
bootstrap页面同时有两个（以上）轮播图问题
07-07
bootstrap页面同时有两个（以上）轮播图冲突问题详解
卡片式轮播画廊效果
08-17
在Android开发中，"卡片式轮播画廊效果"是一种常见的用户界面设计，它通过将多个卡片（通常包含图片或信息）以轮播的方式展示，为用户提供流畅且互动性强的浏览体验。这种效果通常用于应用的启动页、产品展示、图片...
一个页面中使用多组bootstrap的轮播图(carousel)，控制出错解决办法
_纳川
08-17 1761
在使用bootstrap框架开发时，在一个页面中使用多组轮播图(carousel)时，每组轮播图的控制失效或者是出现不会动的情况。就这个问题作出解答： 多组轮播图放在同一个页面时，出现控制一组轮播图每个图都动或者是只有一组能动的情况就是因为div的ID重复的问题导致的。 首先给每组轮播图大盒起一个唯一的id ol li标签下的data-target属性值为# + id a标签下的href的属性...
在同一个页面使用多个swiper,多个轮播出现冲突的问题?
weixin_39964941的博客
06-18 2789
在同一个页面使用多个swiper,多个轮播出现冲突的问题? 本文是解决同一个页面多个swiper，点击其中一个轮播的前进后退按钮，影响其它轮播的问题 代码如下 <swiper class="swiper gallery-top" v-if="list.length > 0" :options="swiperOptionTop" ref="swiperTop"> <swiper-slide class="slide-1" v-for="(item,i) in list" :key
swiper：一个页面多个轮播，互不影响
热门推荐
如是牛
03-02 1万+
最近要实现一个在一个页面展示多个轮播图的功能，html代码如下：<ul> <loop $actorList $k $v/> <li class="list<=$k+1/>"> <div class="swiper-container"> //图片列表 <div class="swiper-w
使用padding-top做轮播图，并实现多个轮播图的同时控制
qq_39145218的博客
09-13 601
1、给swiper轮播图制作，保证其按比例缩小放大。 父类容器div：positon:relative;                   padding-top:百分比（觉得图片宽高比）                   width：100%(也可以是其他百分比) （1）图片：swiper-container，或者是其他的类名：                   position...
swiper,一个页面使用多个轮播
weixin_30784501的博客
08-07 708
代码示例： <html> <head> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet" type="text/css" /> </head> <body> <!--轮播111--&g...
显示多个图片的轮播图
just_a_dream_的博客
10-26 7186
html部分 js部分
js一个轮播页面好几张图片轮播
最新发布
04-29
通过使用JavaScript，可以创建一个轮播页面，实现多张图片轮播的功能。要实现这个功能，你需要先准备好所有需要轮播的图片，然后使用JavaScript代码编写相应的轮播逻辑。 在编写轮播逻辑时，你需要使用定时器来定时...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值