实现点击对应的类别出现对应轮播图（jQuery+bootstrap）

最新推荐文章于 2020-10-14 16:17:06 发布
最新推荐文章于 2020-10-14 16:17:06 发布
阅读量1k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Brave_TY/article/details/79523811
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
* {
padding: 0;
margin:0;
list-style: none;
}
li {
height: 40px;
color:#ccc;
border-bottom:1px solid #ccc;
}
ul li a{
text-decoration: none!important;
    line-height: 42px;
    padding-left: 58px;
}
ul li a:hover {
text-decoration: none!important;
}
.bannerRight {
display: none;
}


.activeli{
    background: rgba(189,220,220,0.5);
    color:#fff;
    }
    .arrows {
    font-size: 73px;
    line-height: 273px;
    }
</style>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
$(function(){
              //轮播
               $('#myCarousel0').carousel({
//设置自动播放/2 秒
interval : 2000,
//设置暂停按钮的事件
pause : 'hover',

wrap : true,

});

$('.category .cateList li').on('click',function(){
$(this).addClass('activeli').siblings('li').removeClass('activeli');
var n = $(this).index();
$('.listRight .bannerRight').eq(n).show().siblings(".bannerRight").hide();
$('#myCarousel'+n).carousel({
//设置自动播放/2 秒
interval : 2000,
//设置暂停按钮的事件
pause : 'hover',

wrap : true,

});
  // 循环轮播到上一个项目
        $(".prev-slide"+n).click(function(){
            $("#myCarousel"+n).carousel('prev');
        });
        // 循环轮播到下一个项目
        $(".next-slide"+n).click(function(){
            $("#myCarousel"+n).carousel('next');
        });
        
});


});
</script>
</head>
<body>
<div class="category">
<div class="container">
<div class="row">
<div class="listLeft">
<div class="col-xs-3 col-md-3 col-lg-3">
<ul class="cateList">
<li class="activeli"><a href="javascript:;">电子产品类1</a></li>
<li><a href="javascript:;">电子产品类2</a></li>
<li><a href="javascript:;">电子产品类3</a></li>
</ul>
</div>
</div>
<div class="listRight">
<div class="bannerRight" style="display: block;">
<div class="col-xs-9 col-md-9 col-lg-9">
<!-- 轮播图 -->
<div id="myCarousel0" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel0" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel0" data-slide-to="1"></li>
<li data-target="#myCarousel0" data-slide-to="2"></li>
</ol>   
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="../images/banner1.png" alt="First slide">
</div>
<div class="item">
<img src="../images/banner2.png" alt="First slide">
</div>
<div class="item">
<img src="../images/banner3.png" alt="First slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="arrows prev-slide0 carousel-control left" href="#myCarousel0" 
data-slide="prev">&lsaquo;</a>
<a class="arrows next-slide0 carousel-control right" href="#myCarousel0" 
data-slide="next">&rsaquo;</a>
</div> 
</div>
</div>
<div class="bannerRight">
<div class="col-xs-9 col-md-9 col-lg-9">
<!-- 轮播图 -->
<div id="myCarousel1" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1"></li>
<li data-target="#myCarousel1" data-slide-to="2"></li>
</ol>   
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="../images/banner3.png" alt="First slide">
</div>
<div class="item">
<img src="../images/banner2.png" alt="First slide">
</div>
<div class="item">
<img src="../images/banner1.png" alt="First slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="arrows prev-slide1 carousel-control left" href="#myCarousel1" 
data-slide="prev">&lsaquo;</a>
<a class="arrows next-slide1 carousel-control right" href="#myCarousel1" 
data-slide="next">&rsaquo;</a>
</div> 
</div>
</div>
<div class="bannerRight">
<div class="col-xs-9 col-md-9 col-lg-9">
<!-- 轮播图 -->
<div id="myCarousel2" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
<li data-target="#myCarousel2" data-slide-to="2"></li>
</ol>   
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="../images/banner2.png" alt="First slide">
</div>
<div class="item">
<img src="../images/banner1.png" alt="First slide">
</div>
<div class="item">
<img src="../images/banner3.png" alt="First slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="arrows prev-slide2 carousel-control left" href="#myCarouse2" 
data-slide="prev">&lsaquo;</a>
<a class="arrows next-slide2 carousel-control right" href="#myCarouse2" 
data-slide="next">&rsaquo;</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Brave_TY
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于bootstrap图片轮播的触摸滑动事件
hqjytaily的博客
09-04 3348
接触web前端有一段时间了，一直没有做过记录，有些问题解决后，一段时间又忘了，处理麻烦，为了自己，也为了与我遇到过同样问题的小白，我决定还是做个记录。 因为bootstrap的强大，所以我们公司的很多开发都是基于bootstrap. 一般都是边用边学，在赶项目的时候，有些功能不得不用熟悉的插件，这时候就会因为代码冲突，造成功能障碍。 bootstrap的轮播，官方文档里没有看到关于touch
jQuery图片轮播展示带文字带缩略图
05-23
文件目录： │ index.html │ ├─images │ 1.jpg │ 2.jpg │ 3.jpg │ 4.jpg │ 5.jpg │ ActionIcons10.png │ arrows_01.png │ arrows_02.png │ s1.jpg │ s2.jpg │ s3.jpg │ s4.jpg │ s5.jpg │ snext.png │ sprev.png │ Ynext.png │ Yprev.png │ ├─js │ jquery-1.7.1.min.js │ slides-1.1.1-min.js │ └─style style.css 效果是一个大的带有标题的图片轮播，右边是小图的列表，可以进行选择小图来切换大图。
基于bootstrap的图片轮播
07-26
基于bootstrap的图片轮播效果，简单易复用
3D图片切换
NINE-NINE的博客
05-07 1564
分享3d效果的图片轮换；
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
1、jq+swiper轮播图 2、支持下方小图切换 3、支持左右箭头切换
jquery+css实现简单的图片轮播效果
10-19
如果你需要这些特性，可以考虑使用像Bootstrap的carousel组件或其他成熟的jQuery轮播插件，如Slick或Swiper。但如果你只想实现基础的图片轮播，以上代码提供了一个很好的起点。 总的来说，实现一个简单的图片轮播...
利用BootStrap的Carousel.js实现轮播图动画效果
10-20
总的来说，Bootstrap的Carousel.js组件提供了一种简单而强大的方式来创建具有专业外观和功能的轮播图，只需少量代码即可实现丰富的用户体验。通过熟练掌握这个工具，你可以轻松地在网页中添加动态内容展示，提升网站...
Jquery轮播图_Jquery轮播图_
10-01
然而，实际开发中，还可以考虑使用现成的轮播图插件，如Slick、Bootstrap Carousel等，它们提供了更多的功能和自定义选项，但基本原理和实现思路类似。无论选择哪种方式，理解轮播图的工作机制和jQuery动画原理都是...
jQuery实现一个简单的轮播图
10-20
在本文中，我们将深入探讨如何使用jQuery来实现一个简单...在实际开发中，还可以利用现有的jQuery轮播插件，如Slick或Bootstrap Carousel，这些插件提供了更多的配置选项和预设样式，能更高效地实现复杂功能的轮播图。
jQuery实现的自定义轮播图功能详解
10-17
jQuery实现的自定义轮播图是一种常见的网页动态效果，用于展示多张图片或内容，通常用于首页或者产品展示页面。相较于使用第三方轮播插件，自定义轮播图有以下几个优势： 1. **功能全面**：可以根据需求定制各种...
bootstrap一个页面两个轮播的解决办法
03-18
通过学习bootstrap这个框架，学会了如何在一个html页面中加载两个轮播。
bootstrap实现图片自动轮播
11-29
bootstrap图片自动轮播效果图： 代码实现： <!DOCTYPE html> <html lang="zh-CN"> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap-theme.min.css" /> [removed][removed] [removed][removed] <style> #div1 {width:600px; height:5
Bootstrap JS插件使用实例(1)-轮播
qq467339640的专栏
11-15 1638
Bootstrap为用户提供了13个很有用的jquery插件，下面列出了各个插件及对应的js文件： 轮播 --------bootstrap-carousel.js 过度效果-----bootstrap-transition.js 模态对话框------bootstrap-modal.js 下拉菜单-------bootstrap-dropdown.js 滚动监听--
bootstrap滑动按钮/取值
cxl4399的博客
11-22 4295
https://www.cnblogs.com/suruozhong/p/6276950.html http://www.htmleaf.com/jQuery/Buttons-Icons/201502051331.html
bootstrap轮播实现
weixin_30813225的博客
05-31 58
在head里引用4个文件： <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="dist/css/bootstrap.min.css" rel="stylesheet" /> ...
Bootstrap 轮播
书香水墨
07-25 188
一、Bootstrap 轮播 ==1.1 简单的图片轮播效果 == <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="wid...
js百度地图marker与swiper轮播图联动
crli的博客
06-14 2345
项目需求，安卓、ios引入webview地图内容与轮播联动，效果与百度题图wabapp效果相同，调用自己数据，地图里面放坐标，地图下部放轮播，并且单击maker坐标时候轮播图滑到相应位置，滑动轮播图，相应坐标弹出信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewpor
bootstrap实现轮播图
qq_43039693的博客
09-16 755
&lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap 轮播&lt;/title&gt; &lt;link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt; &lt;script src=&
jquery通过setInterval实现按钮的轮播点击效果
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-14 463
在项目开发中，需要实现按钮的定时轮播，却发现要引入一个JS轮播插件，需要“大动干戈”。于是，写了个简单的按钮轮播。 CSS样式表 body { margin: 0; padding: 0; } .panel { width: 300px; height: 300px; line-height: 300px; bac.
bootstrap实现轮播图代码
最新发布
05-11
以下是使用Bootstrap实现轮播图的代码示例： ```html <!DOCTYPE html> <title>Bootstrap Carousel Example <link rel="stylesheet" href="https://maxcdn.bootstrapcdn....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值