用HTML5和JavaScript做一个轮播图

说明：
（1）代码中四个div内的图片 " images/14.jpg " , " images/15.jpg " , " images/16.jpg " , " images/17.jpg " ，是本人电脑中的图片若想运行需用自己电脑中的图片；
（2）代码中两个超链接a中的图片 " images/arrowLeft.png " , " images/arrowRight.png "，分别是左右两边的点击箭头；
如图：
运行结果如图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0px;padding: 0px;}#cou{width: 1200px;height: 600px;margin: auto;position: relative;}#content img{width: 1200px;height: 600px;}#content div{display: none;}#content div.on{display: block;}ol,li{list-style: none;}ol{position: absolute;bottom: 20px;left: 565px;background:none;}.item li{float: left;width: 10px;height: 10px;border-radius: 50%;background-color: #fff;margin-right: 10px;}.item li.current{background-color: orange;}.arrow{width: 40px;height: 50px;position: absolute;top: 275px;background-color: #999;display: none;}.arrow img{width: 30px;height: 30px;}.ar{right: 0px;}.al img{margin: 10px 10px 10px 0px;}.ar img{margin: 10px 0px 10px 10px;}</style>
</head>
<body><div id="cou"><div id="content"><div class="on"><img src="data:images/14.jpg" alt=""></div><div><img src="data:images/15.jpg" alt=""></div><div><img src="data:images/16.jpg" alt=""></div><div><img src="data:images/17.jpg" alt=""></div></div><ol class="item"><li class="current"></li><li></li><li></li><li></li></ol><a href="#" class="arrow al" style="border-radius: 0px 25px 25px 0px;"><img src="data:images/arrowLeft.png" alt=""></a><a href="#" class="arrow ar" style="border-radius: 25px 0px 0px 25px;"><img src="data:images/arrowRight.png" alt=""></a></div><script type="text/javascript">//找到四个图片var o=document.querySelector('#cou');var lis=document.querySelector('.item').querySelectorAll('li');var arrows=document.querySelectorAll('.arrow');var ds=document.querySelector('#content').querySelectorAll('div');var  index=0;//保存当前轮播图的索引 默认为0 也就是第一张图片var len=ds.length;var t;//启动定时器t=setInterval(moveNext,2000);//自动轮播//鼠标经过，轮播停止o.function(){clearInterval(t);//清除定时器是图片停止轮播o.style.cursor='pointer';//箭头出现arrows[0].style.display='block';arrows[1].style.display='block';}//鼠标离开，图片继续轮播o.function(){t=setInterval(moveNext,2000)//箭头隐藏arrows[0].style.display='none';arrows[1].style.display='none';}//指示器轮播for(var i=0;i<len;i++){lis[i]._index=i;//新属性 保存位置//遍历li 并为每个li添加点击事件lis[i].function(){//把当前显示的li变为未选中状态lis[index].className='';//当前显示的图片变为未选中ds[index].className='';this.className='current';//被点击的li 变为选中状态ds[this._index].className='on';//轮番图显示为对应的//修改index的值index=this._index;};}//箭头点击//左arrows[0].function(){movePre();}//右arrows[1].function(){moveNext();}//图片切换function moveNext() {ds[index].className='';//把当前显示的图片变为不显示lis[index].className='';//当前指示器不显示index++;//索引递增//使索引循环if (index==len) {index=0;//最后一张之后使索引再变为0 从第一张开始}ds[index].className='on';//切换图片lis[index].className='current';}//左切换function movePre(){//当前显示的变为不显示ds[index].className='';lis[index].className='';index--;if(index==-1){index=len-1;//第一张时，修改为最后一站}//上一张展示ds[index].className='on';lis[index].className='current';}</script>
</body>
</html>

注：博客中图片内容来自彼岸果茶（http://www.bianguocha.com）；

用HTML5和JavaScript做一个轮播图相关推荐

用javascript做网页轮播图
文章目录网页轮播图: 功能需求: 动图展示: 代码分析: 主题结构部分: 样式设置: 交互效果: 引用缓动动画(图片滚动的效果) 网页轮播图: 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能 ...
小白怎么做一个轮播图?（思路+代码）
在页面中写好结构和样式(根据情况而定) 外层用一个$(function(){})函数包裹起来,代表等页面的内容加载完成后再去执行jquery的功能代码. 获取到包裹ul,li的大盒子元素:const ...
VUE如何快速做一个轮播图
1. 第三方插件 https://github.com/surmon-china/vue-awesome-swiper npm install swiper vue-awesome-swiper -- ...
制作轮播图思路 ~ 使用JS做一个轮播图，先在脑海里捋一捋逻辑，我的思路是这样的，看图啦：
制作一个功能比较全的轮播图,应该怎么下手呢?我的思路比较中规中矩,如果不知道怎么下手的,看看我的思路吧,看完一定要着手试试哦~
前端全栈大佬是如何使用javaScript实现一个轮播图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"><meta charset=" ...
用RecyclerView打造一个轮播图
通常Android的轮播图(俗名:Banner)都是用ViewPager实现的,但是我在实际项目运用中碰到了一些小问题,于是决定另寻思路,采用RecyclerView这个更优雅更强大的控件来实现轮播的 ...
[css] 用CSS实现一个轮播图
[css] 用CSS实现一个轮播图使用CSS实现的话,可以使用 animat属性和overflow:hidden 属性来做. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...
使用js做简易轮播图，可自动
[作者注]:第一次使用js做简易轮播图首先在body里div个容器 div class="box"> <p id="p" ></p&g ...

用HTML5和JavaScript做一个轮播图

用HTML5和JavaScript做一个轮播图相关推荐

最新文章

热门文章