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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
深入浅析Vue中的Prop
Jun 10 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
javascript实现倒计时提示框
Mar 02 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
linux下安装php的memcached客户端
2014/08/03 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php微信支付之APP支付方法
2015/03/04 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
js分页代码分享
2014/04/28 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
使用javascript插入样式
2016/03/14 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
py中的目录与文件判别代码
2008/07/16 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
Python3读取zip文件信息的方法
2015/05/22 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
python分割列表(list)的方法示例
2017/05/07 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
pyhton列表转换为数组的实例
2018/04/04 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
《第一次抱母亲》教学反思
2014/04/16 职场文书
医学专业自荐信
2014/06/14 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
迎新生标语大全
2014/10/06 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android