html5时间线图片自动轮播,JS实现简易图片自动轮播
本文实例为大家分享了JS实现简易图片自动轮播的具体代码,供大家参考,具体内容如下
自动播放选项卡
*{
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;
}
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[i].dataIndex = i;
aBtn[i].onclick = function(){
oNow = this.dataIndex;
for (var i=0;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[i].className = '';
aDiv[i].className = '';
}
aBtn[oNow].className = 'active';
aDiv[oNow].className = 'show';
}
}
☜
☞
展示效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html5时间线图片自动轮播,JS实现简易图片自动轮播相关推荐
- html5时间线图片自动轮播,js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下 函数封装:( 匀速运动函数) function animate(obj,target,step,speed){ cl ...
- 简单图片自动手动播放html,js手动播放图片实现图片轮播效果
本文实例为大家分享了js图片轮播具体实现代码,供大家参考,具体内容如下 一.html代码部分(et.thtml): 二.css代码部分(styleet,css): #main span{ width: ...
- js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效
特效描述:html5 tweenmax.js 打碎玻璃图片 轮播切换特效.html5碎玻璃图片切换特效,tweenmax.js实列 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 co ...
- html5 图片局部马赛克,javascript - JS实现马赛克图片效果完整示例
主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS实现马赛克图片效 ...
- html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:- ...
- php 获取图片的宽高,JS怎么获取图片当前宽高
JS获取图片当前的宽高,我们可以使用JavaScript clientWidth和clientHeight属性来实现获取.clientWidth.clientHeight属性表示获取图像的当前宽度和高 ...
- JS实现简易图片时钟效果
简易图片时钟 思路 1.首先创建一个div,在div中有6个img标签,分别代表时分秒. 2.通过dom操作获取这6个img标签. 3.通过new Date()获取时间,根据时间来修改图片的显示. 4 ...
- html5 js图片另存为,amCharts之JavaScript/HTML5 Charts应用教程二:将JS图表另存为图片...
通常,将JavaScript图表另存为图片是一个非常复杂的过程,但amCharts的 1.首先下载canvg 2.包括canvg.js, rbgcolor.js, amcharts.js以及以下扩展: ...
- 把鼠标放到图片后,(HTML+JS实现)静态图片变成动态图
前几天有个朋友问我这个问题:如何实现"把鼠标放到图片后,变成动态图",他估计是没学过JavaScript,其实这个问题实现起来还是挺简单的.下面简单说下: 原图片放静态图,为图片设 ...
- html设置图片不可拖拽,js css3实现图片拖拽效果
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 body{ text-align: center; } .container{ display: flex; just ...
最新文章
- python array 语法_Python基本语法
- 2008秋季-计算机软件基础-有序表合并 教材 P79, ex3
- [Oracle] 中的Temporary tablespace的作用
- laravel mysql like_Laravel数据库查询中对 like 的值进行转义
- Vue开发微信H5 微信分享签名失败问题解决方案
- DL框架之Caffe:深度学习框架之Caffe的简介、安装、使用方法详细攻略
- dev c++怎么调试_「正点原子NANO STM32开发板资料连载」第十八章 USMART 调试组件...
- hadoop安装笔记-cdh4
- 基于OneAPM的Web系统性能监测
- 自拍会不会被大数据_不会搭建大数据平台,我被老板优化了...
- 消防信号总线原理_消防安全微视频:可燃气体探测报警系统培训
- double operator[](int i)_请谨慎使用float和double
- Linux目录结构详解
- 清华大学团队:人脸识别爆出巨大丑闻,15分钟解锁19款手机
- 科学计算器 java_用Java编写的标准计算器、科学计算器、时间转换。
- 【已解决】微信小程序web-view嵌套H5,使用setStorageSync,localStorage.setItem有时候失效的问题
- 实现GB28181流媒体服务解决方案如何实现海康、大华等安防摄像头、NVR、平台接入EasyGBS国标流媒体平台
- 性能测试——jmeter性能测试——重点—核心——线程组、Ramp-Up Period、Loop Count 次采样...
- Java 并发 随笔 1-初尝并发
- 通过ip地址查询远程服务器系统,通过ip地址查询远程服务器系统
热门文章
- 【Lucene】挖掘相关搜索词
- MD5 SHA1 CRC32是什么意思?主要有什么区别?
- 百度地图 大头针设置本地图片与网络图片
- android 蓝牙信息提醒,Android蓝牙与BLE通信相关的读、写、通知、指示操作
- php v9 用户头像,phpcms v9前台会员中心上传头像可getshell | CN-SEC 中文网
- 青岛科技大学计算机转专业,2021年青岛科技大学大一新生转专业及入学考试相关规定...
- 王艾辉:下方重点关注3140 上方3190 破位则追
- 机器学习(11)——时间序列分析
- 【C语言】OJ题:printf函数的返回值
- nexus9刷机全记录