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动态生成指定行数的表格
Jul 11 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
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数据库配置文件一般做法分享
2012/07/07 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
Python读写Excel文件的实例
2013/11/01 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
利用python画一颗心的方法示例
2017/01/31 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
python_mask_array的用法
2020/02/18 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
详解Scrapy Redis入门实战
2020/11/18 Python
销售代表求职自荐信
2013/10/01 职场文书
应聘护士自荐信
2013/10/21 职场文书
工作交流会欢迎词
2014/01/12 职场文书
啦啦队口号大全
2014/06/16 职场文书
全运会口号
2014/06/20 职场文书
2016年少先队活动总结
2016/04/06 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Django程序的优化技巧
2021/04/29 Python
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
Golang bufio详细讲解
2022/04/21 Golang