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 相关文章推荐
超级退弹代码
Jul 07 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
JS重载实现方法分析
Dec 16 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 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和ACCESS写聊天室(九)
2006/10/09 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python实现弹窗祝福效果
2019/04/07 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python三引号如何输入
2020/07/06 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Flask处理Web表单的实现方法
2021/01/31 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
环境工程大学生自荐信
2013/10/21 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
会议主持词
2014/03/17 职场文书
安全标兵事迹材料
2014/08/17 职场文书
长城导游词300字
2015/01/30 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书