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获取当前ip的代码
May 10 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
layui实现数据表格自定义数据项
Oct 26 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添加MySQL数据记录代码
2008/06/07 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php导出CSV抽象类实例
2014/09/24 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
python爬取各类文档方法归类汇总
2018/03/22 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
英国精品买手店:Browns Fashion
2016/09/29 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
公司总经理岗位职责
2014/03/15 职场文书
一年级学生评语大全
2014/04/21 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
给上级领导的感谢信
2015/01/22 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
总结Python连接CS2000的详细步骤
2021/06/23 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技