javascript焦点图(根据图片下方的小框自动播放)
html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} .photo {
width: 400px;
height: 200px;
margin: 50px;
position: relative;
} .main {
width: 400px;
height: 200px;
position: relative;
} .main1 li {
width: 400px;
height: 200px;
list-style-type: none;
} .pto {
position: absolute;
left: 0;
top: 0;
} .pto1 {
width: 400px;
height: 200px;
background: red;
} .pto2 {
width: 400px;
height: 200px;
background: pink;
display: none;
} .pto3 {
width: 400px;
height: 200px;
background: blue;
display: none;
} .btn {
width: 30px;
height: 30px;
position: absolute;
} .btn1 {
left: 0;
top: 85px;
background: url("img/left.png");
} .btn2 {
right: 0;
top: 85px;
background: url("img/right.png");
} .circleBtn {
position: absolute;
top: 170px;
right: 182px;
width: 42px;
height: 10px;
zoom: 1;
} .circleBtn span {
width: 10px;
height: 10px;
margin: 0 2px;
float: left;
cursor: pointer;
background: url("img/cir.png");
} .circleBtn .light {
background: url("img/oncir.gif");
}
</style>
<script type="text/javascript" src="jiaodiantujs.js">
</script> </head> <body>
<div class="photo" id="main">
<div class="main">
<ul class="main1" id="amain">
<li class="pto pto1">one</li>
<li class="pto pto2">two</li>
<li class="pto pto3">three</li>
</ul>
</div>
<!--
<span class="btn btn1" id="btn1"></span>
<span class="btn btn2" id="btn2"></span>
-->
<div class="circleBtn" id="circleBtn">
<span class="light"></span>
<span></span>
<span></span>
</div> </div>
</body> </html>
下面是javacript部分
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
//pto变量为所展示的图片集和
var pto = $("amain").getElementsByTagName("li");
//定义一个span标签的集合cirBtn
var cirBtn = $("circleBtn").getElementsByTagName("span");
//定义一个全局变量
var index = 0;
//定义一个setInterval方法cirTimer
var cirTimer = null;
for (var i = 0; i < cirBtn.length; i++) {
//给图片加上id=0,1,2
cirBtn[i].id = i;
//鼠标移动邦定触发事件:显示当前id对应的图片
cirBtn[i].onmouseenter = function() {
//先停止自动循环
clearInterval(cirTimer);
//隐藏图片和小框
clearBtn();
//显示当前id对应的图片和小框
showBtn(this.id);
}
//鼠标离开触发事件:自动循环
cirBtn[i].onmouseout = function() {
cirTimer = setInterval(autoPlay, 2000);
}
}
//设置当前只有一个定时器cirTimer
if (cirTimer) {
clearInterval(cirTimer);
cirTimer = null;
}
cirTimer = setInterval(autoPlay, 2000);
//自动循环函数
function autoPlay() {
//当index小于2则++,否则就是超过长度,则归0即index=0
if (index < cirBtn.length - 1) {
index++;
} else {
index = 0;
}
//console.log(index);
//清除函数
clearBtn();
//显示函数
showBtn(index);
}
//定义一个隐藏图片和小框的函数
function clearBtn() {
for (var i = 0; i < cirBtn.length; i++) {
cirBtn[i].className = "";
pto[i].style.display = "none";
}
}
//定义一个显示当前id对应的图片和小框的函数
function showBtn(x) {
for (var i = 0; i < cirBtn.length; i++) {
console.log(x);
if (i == x) {
cirBtn[i].className = "light";
pto[i].style.display = "block";
}
//这里重要了.这里把x赋值给index是为了让循环从停止的id重新开始循环
index = x;
}
}
}
javascript焦点图(根据图片下方的小框自动播放)的更多相关文章
- javascript焦点图自动播放
这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- javascript焦点图之缓冲滚动无缝切换
在用于实现无缝切换四张图,所以设置了6个图片就是 4,0,1,2,3,4,0 <!DOCTYPE html> <html> <head> <meta char ...
- javascript焦点图自动缓冲滚动
html中调用的js库,之前的随笔中有写,就不细说了,不明白的可以留言给我 <!DOCTYPE html> <html> <head> <meta chars ...
- javascript焦点图之垂直滚动
html代码布局,需要用到定位,不细说了 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- javascript焦点图左右按钮简单自动轮播
这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...
- 黄聪：手机移动端建站Jquery+CSS3+HTML5触屏滑动特效插件、实现触屏焦点图、图片轮展图
前言 TouchSlide 可以说是 SuperSlide 手机简化版,不同的地方在于:1.TouchSlide是纯javascript开发的,不依赖任何js库,鉴于此,TouchSlide调用方法和 ...
- javascript焦点图（能够自己主动切换 ）
/* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- （转）轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程
myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左 ...
随机推荐
- Android开源库loopj的android-async-http的 JsonHttpResponseHandler 存在死循环GC_CONCURRENT
我现在用的是 AndroidAsyncHttp 1.4.4 版本,之前遇到一个很奇怪的问题, 当使用 JsonHttpResponseHandler 解析请求的页面出现服务器错误或其他情况返回的内容不 ...
- 更改pip源
~/.pip/下新建pip.conf文件:(Windows下载Users/xxx/pip/pip.ini) [global] trusted-host = pypi.douban.com index- ...
- html-----vedio标签（HTML5新标签VIDEO在IOS上默认全屏播放）
今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...
- do{...}while(0)的意义和用法(转载)
linux内核和其他一些开源的代码中,经常会遇到这样的代码: do{ ... }while(0) 这样的代码一看就不是一个循环,do..while表面上在这里一点意义都没有,那么为什么要这么用呢? 实 ...
- Mysql的热备份［转载］
学一点 mysql 双机异地热备份----快速理解mysql主从,主主备份原理及实践 双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始 ...
- .a与.framework的区别
库是共享程序代码的方式,一般分为静态库和动态库. 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. iOS中静态库形式: .a和.framework 动态库:链接时不复制,程序运行 ...
- php笔记(七)PHP类于对象之多态
<?php interface ICanEat{ public function eat($food);} class Human implements ICaneat{ public func ...
- suricata抓包方式之一AF_PACKET
suricata抓包方式之一AF_PACKET 噜拯渡 睦坚削 曜纡宄 式犒藿氆 咬焚桤φ 要蒯钮 喃俚夼 币噎嶂颐 话千叶舞就后悔了怎么想都容易让人引 虻谮м 及葚雏钏 看着表面平静实际 ...
- 2015 asia xian regional F Color (容斥 + 组合数学)
2015 asia xian regional F Color (容斥 + 组合数学) 题目链接http://codeforces.com/gym/100548/attachments Descrip ...
- IE8下 Select文字垂直居中的办法
.select { padding: 4px 0; height: 30px; line-height: 26px; vertical-align: middle;} 处理前: 处理后: