原生JavaScript实现轮播图


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下

效果:

原生JavaScript实现轮播图

代码:

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 
 ul,
 li {
 list-style: none;
 }
 
 .banner {
 width: 1200px;
 height: 535px;
 border: 1px solid red;
 margin: 0 auto;
 position: relative;
 }
 
 .slider li {
 position: absolute;
 left: 0;
 top: 0;
 }
 
 a {
 width: 40px;
 height: 50px;
 background-color: rgba(0, 0, 0, 0.1);
 font-size: 50px;
 text-align: center;
 line-height: 50px;
 position: absolute;
 text-decoration: none;
 color: gray;
 }
 
 .btnl {
 left: 0;
 top: 50%;
 margin-top: -15px;
 }
 
 .btnr {
 right: 0;
 top: 50%;
 margin-top: -25px;
 }
 
 .tabs {
 position: absolute;
 bottom: 20px;
 left: 50%;
 margin-left: -75px;
 }
 
 .tabs li {
 width: 15px;
 height: 15px;
 background-color: #ccc;
 border-radius: 50%;
 float: left;
 margin-right: 10px;
 }
 </style>
 </head>

 <body>
 <div class="banner">
 <ul class="slider">
 <li><img src="img/b1.jpg" alt="" /></li>
 <li><img src="img/b2.jpg" alt="" /></li>
 <li><img src="img/b3.jpg" alt="" /></li>
 <li><img src="img/b4.jpg" alt="" /></li>
 <li><img src="img/b5.jpg" alt="" /></li>
 <li><img src="img/b6.jpg" alt="" /></li>
 </ul>
 <a href="javascript:void(0);" class="btnl">
 <</a>
 <a href="javascript:void(0);" class="btnr">></a>
 <ul class="tabs">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <script type="text/javascript">
 var banner = document.getElementsByClassName("banner")[0];
 var slider = document.getElementsByClassName("slider")[0];
 var li = slider.getElementsByTagName("li");
 var btnl = document.getElementsByClassName("btnl")[0];
 var btnr = document.getElementsByClassName("btnr")[0];
 var tabs = document.getElementsByClassName("tabs")[0];
 var btns = tabs.getElementsByTagName("li");

 //初始化
 btns[0].style.backgroundColor = "red";

 for(var i = 0; i < li.length; i++) {
 if(i == 0) {
 continue;
 } else {
 li[i].style.opacity = 0;
 }
 }

 var timer = setInterval(mover, 1000);

 //声明一个变量,代表当前图片的下标
 var num = 0;

 function mover() {
 num++;
 if(num == li.length) {
 num = 0;
 }
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "red";

 }

 function movel() {
 num--;
 if(num == -1) {
 num = li.length - 1;
 }
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "red";
 }

 banner.onmouseover = function() {
 clearInterval(timer)
 }

 banner.onmouseout = function() {
 timer = setInterval(mover, 1000)
 }

 btnl.onclick = function(e) {
 movel();
 }
 btnr.onclick = function(e) {
 mover();
 }

 // 小圆点效果
 for(var i = 0; i < btns.length; i++) {
 btns[i].index = i;
 btns[i].onmouseover = function() {
 if(this.index == num) {
 return;
 } else {
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[this.index].style.opacity = 1;
 btns[this.index].style.background="red";
 num=this.index;
 }
 }
 }
 </script>
 </body>

</html>

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

Javascript 相关文章推荐
遍历jquery对象的代码分享
Nov 02 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
学习javascript文件加载优化
Feb 19 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
回顾Javascript React基础
Jun 15 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
原生JavaScript实现留言板
Jan 10 #Javascript
JavaScript实现点击切换验证码及校验
Jan 10 #Javascript
JavaScript canvas实现雨滴特效
Jan 10 #Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
利用JS判断元素是否为数组的方法示例
Jan 08 #Javascript
JS实现页面侧边栏效果探究
Jan 08 #Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
You might like
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
js替换字符串的所有示例代码
2013/07/23 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
javascript arguments使用示例
2014/12/16 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
abstract class和interface有什么区别?
2012/01/03 面试题
简述数据库的设计过程
2015/06/22 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
Win11开始菜单添加休眠选项
2022/04/19 数码科技