JS实现简易图片自动轮播


Posted in Javascript onOctober 16, 2020

本文实例为大家分享了JS实现简易图片自动轮播的具体代码,供大家参考,具体内容如下

<!doctype html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>自动播放选项卡</title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 
 .box{
 width:600px;
 height:400px;
 border:1px solid red;
 margin:100px auto;
 position:relative;
 }
 
 a{
 font-size:40px;
 position:absolute;
 text-decoration:none;
 top:-10px;
 }
 #prev{
 
 left:0;
 }
 #next{
 
 right:0;
 
 }
 #pos{
 margin-left:30px;
 }
 input{
 width:90px;
 height:40px;
 float:left;
 outline:none;
 border:0;
 }
 .box div{
 width:600px;
 height:400px;
 background:skyblue;
 text-align:center;
 line-height:300px;
 font-size:100px;
 font-weight:bold;
 text-shadow:5px 5px 5px #f90;
 display:none;
 }
 
 .box .show{
 display:block;
 }
 .box .active{
 width:88px;
 color:#fff;
 font-size:18px;
 font-weight:bold;
 background:#f90;
 }
 </style>
 <script>
 window.onload = function()
 {
 var oBox = document.getElementById('box');
 var oPrev = document.getElementById('prev');
 var oNext = document.getElementById('next');
 var aBtn = document.getElementsByTagName('input');
 var aDiv = oBox.getElementsByTagName('div');
 var oNow = 0;
 
 for (var i=0;i<aBtn.length;i++) {
 aBtn[i].dataIndex = i;
 
 aBtn[i].onclick = function(){
 
 oNow = this.dataIndex;
 
 for (var i=0;i<aBtn.length;i++) {
 aBtn[i].className = '';
 aDiv[i].className = '';
 }
 this.className = 'active';
 aDiv[this.dataIndex].className = 'show';
 }
 }
 
 oPrev.onclick = prev;
 oNext.onclick = next;
 
 //实现自动播放
 var timer = setInterval(next , 1000);
 
 oBox.onmouseover = function()
 {
 clearInterval(timer);
 }
 
 oBox.onmouseout = function()
 {
 timer = setInterval(next , 1000);
 }
 
 
 function prev()
 {
 oNow--;
 if (oNow < 0) {
 oNow = aBtn.length-1;
 }
 tab();
 }
 
 function next()
 {
 oNow++;
 if (oNow > aBtn.length-1) {
 oNow = 0;
 }
 
 tab();
 
 }
 
 function tab()
 {
 for (var i=0;i<aBtn.length;i++) {
 aBtn[i].className = '';
 aDiv[i].className = '';
 }
 aBtn[oNow].className = 'active';
 aDiv[oNow].className = 'show';
 }
 
 
 }
 </script>
 </head>
 
 <body>
 <div class="box" id="box">
 <a href="javascript:;" id="prev">☜</a>
 <a href="javascript:;" id="next">☞</a>
 <input type="button" name="" value="亚洲" class="active" id="pos"/>
 <input type="button" name="" value="欧洲" />
 <input type="button" name="" value="非洲" />
 <input type="button" name="" value="北美洲" />
 <input type="button" name="" value="南美洲" />
 <input type="button" name="" value="大洋洲" />
 <div class="show">亚洲</div>
 <div>欧洲</div>
 <div>非洲</div>
 <div>北美洲</div>
 <div>南美洲</div>
 <div>大洋洲</div>
 </div>
 </body>
</html>

展示效果:

JS实现简易图片自动轮播

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
javascript学习网址备忘
May 29 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 #Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
JS绘图Flot应用图形绘制异常解决方案
Oct 16 #Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 #Javascript
JS highcharts动态柱状图原理及实现
Oct 16 #Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 #Javascript
JS highcharts实现动态曲线代码示例
Oct 16 #Javascript
You might like
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
python k-近邻算法实例分享
2014/06/11 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
在线服装零售商:SheIn
2016/07/22 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
经典c++面试题四
2015/05/14 面试题
党员党性分析材料
2014/02/17 职场文书
怎样写辞职信
2015/02/27 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
学校工会工作总结2015
2015/05/19 职场文书
python缺失值填充方法示例代码
2022/12/24 Python