Bootstrap框架实现广告轮播效果
发布时间:2020-12-18 00:47:08 所属栏目:安全 来源:网络整理
导读:之前写过一个原生纯js版本的广告轮播,相比之前那个,这个由于用了Bootstrap框架,实现起来代码相对简单一点,而且也比较美观,效果如图:其中某一张图片 这是其中的两张图片,可以看到上面有小圆点,就和平时看到的一些网站的一样,点击圆点可以切换图片,
之前写过一个原生纯js版本的广告轮播,相比之前那个,这个由于用了Bootstrap框架,实现起来代码相对简单一点,而且也比较美观,效果如图:其中某一张图片 这是其中的两张图片,可以看到上面有小圆点,就和平时看到的一些网站的一样,点击圆点可以切换图片,按照指定的顺序,还有上面的箭头,点击左右箭头,就可以左右移动,这就是大体的功能。 接下来上代码: HTML代码: js代码: 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我们自己可以省很多代码,而且效果也很漂亮,但是不能过多依赖,代码还是要自己写的。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
- angular – 错误:模块’AppModule’声明的意外模
- jax-ws之webservice security(安全)教程第一天
- ip、ss、nmcli、ifconfig、netstat及bonding实验
- 如何将AngularUI集成到AngularJS?
- 免费的天气预报webservice接口
- twitter-bootstrap – Bootstrap Modal对我不起作
- forms – ng-show =“true”但仍然有class =“ng
- Liferay Portal额外研究(二):对Liferay进行瘦
- Bootstrap学习总结笔记(9)-- 基本组件之input输
- 简单登陆系统的开发
热点阅读