利用Jquery+css+html来实现

一、实现思路

将a标签通过Jquery的方式动态生成然后添加到相应位置即可

二、相关代码

HTML代码

 <!-- 轮播图 --><!-- 移动端：轮播图图片会随着屏幕的缩小自动适应 --><div class="wjs_banner"><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><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"  data-large-image="./images/slide_01_2000x410.jpg" data-mobile-image="./images/slide_01_640x340.jpg"><!-- 动态创建a标签 --></div><div class="item" data-large-image="./images/slide_02_2000x410.jpg" data-mobile-image="./images/slide_02_640x340.jpg"></div><div class="item"  data-large-image="./images/slide_03_2000x410.jpg" data-mobile-image="./images/slide_03_640x340.jpg"></div><div class="item"  data-large-image="./images/slide_04_2000x410.jpg" data-mobile-image="./images/slide_04_640x340.jpg"></div></div><!-- Controls --><a class="left carousel-control" 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" 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>

JS代码

$(function(){// 初始化工具提示$('[data-toggle="tooltip"]').tooltip()// 获取每个itemvar items = $(".carousel-inner .item")// 监听窗口大小$(window).on("resize" , function(){// 获取当前屏幕宽度var width = $(window).width()// 判断屏幕的宽度if(width >= 768){ //说明是非移动端使用// 为每个item添加子元素一一遍历$(items).each(function(){var item = $(this)// 以data开头的自定义属性可以使用这种方法获取var imgSrc = item.data("largeImage")item.html($("<a href='javascript:;' class='PcImg'></a>").css("backgroundImage","url("+imgSrc+")"))})}else{$(items).each(function(){var item = $(this)var imgSrc = item.data("mobileImage")item.html($("<a href='javascript:;' class='PcImg'></a>").css("backgroundImage","url("+imgSrc+")"))})}}).trigger("resize") // 添加移动端的滑动操作var startX,endX;var carousel_inner=$(".carousel-inner")[0];// 获取当前轮播图var carousel = $(".carousel");carousel_inner.addEventListener("touchstart",function(e){startX = e.targetTouches[0].clientX;})carousel_inner.addEventListener("touchend",function(e){endX = e.changedTouches[0].clientx;if(endX - startX > 0){carousel.carousel("prev");}else if(endX-startX<0){carousel.carousel("next")}})
})

less代码

.wjs_banner{.mobileImg{width: 100%;display: block;}.mobileImg > img {width: 100%;display: block;}.PcImg{width: 100%;height: 410px;display: block;background-position: center center;background-size: cover;}
}

三、相关知识总结

以data-开头的自定义属性
HTML5规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即可，Jquery的data()方法可以直接操作这种属性。
iscroll.js的使用

bootstrap实战--微金所项目(轮播图2)相关推荐

bootstrap实战--微金所项目(轮播图1)
使用HTML+CSS实现响应式轮播图一.轮播图展示移动端(< 768px) 非移动端(>768px) 二.轮播图实现思路移动端 1).在移动端可以直接使用bootstrap提供的相关 ...
bootstrap实战--微金所项目(导航栏)
导航栏实现一.导航栏展示二.导航栏实现思路导航栏在不同的屏幕大小下呈现不同的样式,移动端下使用手风琴菜单(有现成的代码),在sm屏幕下,除了微金所图标和个人中心外,其余都不可见. 三.相关代码 ...
bootstrap实战--微金所项目(顶部通栏)
顶部通栏实现一.头部展示二.头部概述头部主要由四部分组成,由栅格系统实现当屏幕宽度小于992px时,该部分隐藏,响应式结构三.相关代码 html代码 <!DOCTYPE html> ...
项目轮播图功能实现和导航栏的实现
项目轮播图功能实现和导航栏的实现轮播图功能安装依赖模块上传文件相关配置注册home子应用创建轮播图的model模型创建Banner的序列化器创建Banner的视图类配置Banner的路 ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
AxureRP实战（三）Banner轮播图交互（进阶篇）
前一篇<AxureRP实战(二)Banner轮播图交互(基础篇)>用淘宝的首页banner案例讲解了如何运用动态面板实现banner轮播图的切换,有了基本交互功能.但是,交互效果还有些欠缺 ...
学成在线项目-轮播图banner
学成在线项目-轮播图banner 1.效果图如下 2.html代码如下: <!DOCTYPE html> <html lang="en"> <head ...
Python全栈（八）Flask项目实战之8.CMS后台轮播图管理
文章目录一.首页轮播图二.CMS轮播图管理页面三.CMS添加轮播图四.CMS轮播图编辑和删除五.七牛云介绍人生是需要奋斗的,只有你奋斗了,失败后才会问心无愧: 人生是单行路,只有奋斗了,才 ...
[小程序项目] 使用微信开发者工具新闻小项目轮播图新闻列表页点击跳转新闻详情页登录获取用户基本信息
文章目录效果 Gitee 目录结构 app.json 首页 pages/news/news.wxml pages/news/news.wxss pages/news/news.js 配置网络请求 u ...

bootstrap实战--微金所项目(轮播图2)

利用Jquery+css+html来实现

一、实现思路

二、相关代码

三、相关知识总结

bootstrap实战--微金所项目(轮播图2)相关推荐

最新文章

热门文章