Bootstrap框架实现广告轮播效果


Posted in Javascript onNovember 28, 2016

之前写过一个原生纯js版本的广告轮播,相比之前那个,这个由于用了Bootstrap框架,实现起来代码相对简单一点,而且也比较美观,效果如图:其中某一张图片

Bootstrap框架实现广告轮播效果

Bootstrap框架实现广告轮播效果

这是其中的两张图片,可以看到上面有小圆点,就和平时看到的一些网站的一样,点击圆点可以切换图片,按照指定的顺序,还有上面的箭头,点击左右箭头,就可以左右移动,这就是大体的功能。

接下来上代码:
HTML代码:

<!-- 广告轮播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
 <ol class="carousel-indicators" id="dian">
 <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
 </ol>
 <div class="carousel-inner" id="change">
 <div class="item active">
  <a href="#"><img src="#" id="one"></a>
 </div>
 </div>
 <a class="left carousel-control" href="#ad-carousel" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#ad-carousel" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
这是轮播广告的基本框架,在这段代码中,首先就引入了bootstrap的.carousel类,它是bootstrap中定义的,每一个li相当于上面的小圆点。其中必须要有data属性,不然不会实现切换,在bootstrap中每一个data属性都和js代码相关,所以,data属性不可省去。

js代码:

function createImg()
 {
  var images = ["images/1.jpg","images/2.jpg","images/3.jpg", "images/4.jpg", "images/5.jpg"];
  var oltag = document.getElementById("dian");
  var divtag = document.getElementById("change"); 
  for (var i = 0; i < images.length; i++)
  {
  if (i == 0)
  {
   document.getElementById("one").src = images[i];
  }
  else
  {
   var li = document.createElement("li");
   li.setAttribute("data-target", "#ad-carousel");
   li.setAttribute("data-slide-to",""+(i+1));
   oltag.appendChild(li);


   var div = document.createElement("div");
   div.className = "item";
   var a = document.createElement("a");
   var img = document.createElement("img");
   img.src = images[i];
   a.appendChild(img);
   div.appendChild(a);
   divtag.appendChild(div);
  }
  }
 }

Js代码主要是创建img和li,在里面放图片和加上图片的小圆点。在每个标签上加上对应的类,就行了。

总结:以上代码中的左右箭头用了bootstrap的图形库,用起来也是很方便,有了bootstrap我们自己可以省很多代码,而且效果也很漂亮,但是不能过多依赖,代码还是要自己写的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
ReactJs快速入门教程(精华版)
Nov 28 #Javascript
js窗口震动小程序分享
Nov 28 #Javascript
JS获取年月日时分秒的方法分析
Nov 28 #Javascript
js中string和number类型互转换技巧(分享)
Nov 28 #Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 #Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 #Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
php include,include_once,require,require_once
2008/09/05 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php和html的区别点详细总结
2019/09/24 PHP
jquery实用代码片段集合
2010/08/12 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
对numpy中轴与维度的理解
2018/04/18 Python
python实现猜单词小游戏
2020/05/22 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python使用建议与技巧分享(一)
2020/08/17 Python
如何通过python计算圆周率PI
2020/11/11 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
应聘护士自荐信
2013/10/21 职场文书
大学生自我鉴定
2013/12/08 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
项目总经理岗位职责
2014/02/14 职场文书
六查六看剖析材料
2014/02/15 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
合伙经营协议书范本
2014/09/13 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
学校捐书倡议书
2015/04/27 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python