轮播图-JavaScript
轮播图一：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>轮播图显示一</title>
</head>
<script type="text/javascript">
<!--
var n = ;
function init(){
n++;
if(n == ){
n = ;
}
//拿到图片对象
var img = document.getElementById("img");
img.src = n + ".png";
//清空label控件的样式
var label = document.getElementsByTagName("label");//通标签名字拿取
for(var i = ; i < label.length; i++){
label[i].className = "";
}
//设定对应的label控件的样式
document.getElementById("l" + n).className = "one"; setTimeout("init()",); }
//-->
</script>
<style type="text/css">
#d{
position:relative;
top:-30px;
}
label{
margin-left:20px;
}
.one{
width:10px;
height:10px;
border:1px solid black;
background-color: red;
}
</style>
<body onload="init()">
<div align="center">
<img src = "1.png" alt="aaa" width="" height="" id="img">
<div id="d">
<label id = "l1"> </label>
<label id = "l2"> </label>
<label id = "l3"> </label>
<label id = "l4"> </label> </div>
</div> </body>
</html>
轮播图二：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>轮播图显示一</title>
</head>
<script type="text/javascript">
<!--
var n = ;
var t = ; //定义一个事件变量
boolean flag = false;//
function init(){
//设置鼠标点击就暂停属性
//拿到所有的label控件
var labs = document.getElementsByTagName("label");
//给每个label控件注册事件
for(var i = ; i < labs.length; i++){
labs[i].onmouseover = function(){
//让时间停止
clearTimeout(t);
//显示对应的图片,此处不能使用labs[i]
// * 1 转换成整型
var b = this.innerText *
//拿到img对象
var img = document.getElementById("img");
img.src = b + ".png"; //显示成对应的图片
//清空label控件的样式,清空样式
var label = document.getElementsByTagName("label");//通标签名字拿取
for(var i = ; i < label.length; i++){
label[i].className = "";
}
//同时，让label的样式变成one
this.className = "one";
}
//再注册一个事件，鼠标离开后继续开始
labs[i].onmouseout = function(){
//隔1秒调用fun()
setTimeout("fun()",);
//改变n的值
n = this.innerText * ;
//离开时设置为false
flag = false;
}
}
fun();
}
function fun(){//单独创建一个函数
n++;
if(n == ){
n = ;
}
//拿到图片对象
var img = document.getElementById("img");
img.src = n + ".png";
//清空label控件的样式,清空样式
var label = document.getElementsByTagName("label");//通标签名字拿取
for(var i = ; i < label.length; i++){
label[i].className = "";
}
//设定对应的label控件的样式
document.getElementById("l" + n).className = "one"; t = setTimeout("fun()",);
}
//-->
</script>
<style type="text/css">
#d{
position:relative;
top:-30px;
}
label{
margin-left:20px;
}
.one{
width:10px;
height:10px;
border:1px solid black;
background-color: red;
}
</style>
<body onload="init()">
<div align="center">
<img src = "1.png" alt="aaa" width="" height="" id="img">
<div id="d">
<label id = "l1"> </label>
<label id = "l2"> </label>
<label id = "l3"> </label>
<label id = "l4"> </label> </div>
</div> </body>
</html>
DOM：
document object model文档对象模型
通过JavaScript，可以重构整个HTML文档。可以添加、改变或重排页面上的项目。
DOM树：
节点：文档中的每个成分都是一个节点，包括文本也是节点。
轮播图-JavaScript的更多相关文章
- 【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript效果：手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- 原生javascript焦点轮播图
刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...
- JavaScript 轮播图
这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...
- 简要分析javascript的选项卡和轮播图
选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...
- 浅谈轮播图（原生JavaScript实现）
现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...
- 前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战
一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
随机推荐
- HTML颜色编码
Web安全色 #000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033 ...
- Hadoop家族学习路线图
主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa,新增加的项 ...
- Centos4.3安装MySQL-python-1.2.3，出现error: command 'gcc' failed with exit status 1
在Linux Centos 4.3上安装MySQL-python-1.2.3的时候出现error: command 'gcc' failed with exit status 1, 具体原因是因为没有 ...
- wps 2012-2013 通杀漏洞（CVE-2013-3934）
测试方法: 本站提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! #!/usr/bin/python # Exploit Title: Kingsoft Office Writer ...
- Web.config配置文件详解(新手必看)
花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. <? ...
- asp.net 使用 MongoDB 初体验
首先:驱动 如果asp.net 想使用MongoDB,.net没有自带的链接类.得用第三方或官方的链接类. 当然有很多种驱动,我就不一一介绍了. 今天我就介绍一个我比较常用的驱动-----MongoD ...
- 【CSS】Intermediate4:Background Images
1. background:background-color url-background-image background-repeat(repeat/repeat-y/repeat-x/no-re ...
- 华为 2015 机试 输出：数字后面的连续出现的（2个或多个）相同字符（数字或者字符），删去一个，非数字后面的不要删除，例如，对应输出为：33aabb55pin。
package 华为机试; //C++ 输入:由数字和字母组成的字符串,例如:333aaabb55ppin //输出:数字后面的连续出现的(2个或多个)相同字符(数字或者字符),删去一个,非数字后面的 ...
- Spring笔记(三)AOP前篇之动态代理
AOP思想是将程序中的业务代码与服务代码进行分离,在运行时进行结合.比较强调程序的层次结构,是一种面向切面的编程.而在AOP实现的底层主要用到了动态代理,而动态代理又分为JDK动态代理和CGLIB动态 ...
- JVM 进行线程同步背后的原理
前言 所有的 Java 程序都会被翻译为包含字节码的 class 文件,字节码是 JVM 的机器语言.这篇文章将阐述 JVM 是如何处理线程同步以及相关的字节码. 线程和共享数据 Java 的一个优点 ...