javascript焦点图自动播放
这次是完整版，网页点开就能自动播放
<!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;
} .pto4 {
width: 400px;
height: 200px;
background: #f2ee36;
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: 172px;
width: 56px;
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> </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>
<li class="pto pto4">four</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>
<span></span>
</div> </div> </body> </html>
下面的是js代码，函数的定义都有注释，不明白的可以看前面的单个焦点图的随笔，图片是img文件夹下
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} var btnleft = $("btn1");
var btnright = $("btn2"); //1.先做按钮特效
//定义自定义函数用于按钮
function onBtn(one, two) {
one.style.background = two;
}
//当鼠标移动至左边按钮调用onBtn函数
btnleft.onmouseenter = function() {
onBtn(this, "url(img/onleft.gif) no-repeat");
}
//同理
btnleft.onmouseleave = function() {
onBtn(this, "url(img/left.png) no-repeat");
}
//当鼠标移动至右边按钮调用onBtn函数
btnright.onmouseenter = function() {
onBtn(this, "url(img/onright.gif) no-repeat");
}
//同理
btnright.onmouseleave = function() {
onBtn(this, "url(img/right.png) no-repeat");
} //2.设置图片，小框同时移动
//定义变量
var pto = $("amain").getElementsByTagName("li");
var cirBtn = $("circleBtn").getElementsByTagName("span");
var index = 0;
var timer = null;
var div = $("main"); //设置定时器timer
//timer = setInterval(autoPlayRight, 2000); //设置自动函数
function autoPlayRight() {
if (index < pto.length - 1) {
index++;
} else {
index = 0;
}
//调用清除图片函数
clearPto();
//调用显示图片函数，代入参数index
showPto(index);
//调用清除小框函数
clearBtn();
//调用显示小框函数，代入参数index
showBtn(index); } //定义清除图片的函数
function clearPto() {
for (var i = 0; i < pto.length; i++) {
pto[i].style.display = "none";
}
} //定义显示图片的函数
function showPto(x) {
for (var i = 0; i < pto.length; i++) {
if (i == x) {
pto[i].style.display = "block";
}
}
} //定义清除小框的函数
function clearBtn() {
for (var i = 0; i < cirBtn.length; i++) {
cirBtn[i].className = "";
}
} //定义显示小框的函数
function showBtn(y) {
for (var i = 0; i < cirBtn.length; i++) {
if (i == y) {
cirBtn[i].className = "light";
}
//这里重要了，如果不把返回值赋值给index，鼠标离开小框，
//自动循环会执行上一次的循环，而不是本次鼠标离开时，显示下一张图片
index = y;
}
} //3.设置鼠标点击事件
btnright.onclick = autoPlayRight;
btnleft.onclick = btnLeft; function btnLeft() {
if (index == 0) {
index = pto.length - 1;
} else {
index--;
}
//调用清除图片函数
clearPto();
//调用显示图片函数，代入参数index
showPto(index);
//调用清除小框函数
clearBtn();
//调用显示小框函数，代入参数index
showBtn(index);
} //4.设置鼠标移动至焦点图上时候停止自动播放
//把定时器放入自定义函数方便调用
function start() {
timer = setInterval(autoPlayRight, 2000);
} //把清除定时器放入自定义函数便于调用
function stop() {
clearInterval(timer);
}
//鼠标进入焦点图则停止自动播放
div.onmouseenter = stop;
//鼠标离开则开始自动
div.onmouseleave = start;
//设置当前只有一个定时器
if (timer) {
clearInterval(timer);
timer = null;
}
//设置网页点开时就自动播放
start(); //5.设置图片随小框变化
for (var i = 0; i < cirBtn.length; i++) {
cirBtn[i].id = i;
cirBtn[i].onmouseenter = function() {
clearInterval(timer);
//调用清除图片函数
clearPto();
//调用显示图片函数，代入参数index
showPto(this.id);
//调用清除小框函数
clearBtn();
//调用显示小框函数，代入参数index
showBtn(this.id);
} }
</script>
javascript焦点图自动播放的更多相关文章
- javascript焦点图自动缓冲滚动
html中调用的js库,之前的随笔中有写,就不细说了,不明白的可以留言给我 <!DOCTYPE html> <html> <head> <meta chars ...
- javascript焦点图(根据图片下方的小框自动播放)
html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...
- javascript焦点图之缓冲滚动无缝切换
在用于实现无缝切换四张图,所以设置了6个图片就是 4,0,1,2,3,4,0 <!DOCTYPE html> <html> <head> <meta char ...
- javascript焦点图之垂直滚动
html代码布局,需要用到定位,不细说了 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- javascript焦点图左右按钮简单自动轮播
这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...
- javascript焦点图（能够自己主动切换 ）
/* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...
- 使用 iscroll 实现焦点图无限循环
现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...
- jQuery可自动播放动画焦点图插件Koala
Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放.该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图 ...
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
随机推荐
- Java NIO 内存映射文件
Java NIO 内存映射文件 @author ixenos 文件操作的四大方法 前提:内存的访问速度比磁盘高几个数量级,但是基本的IO操作是直接调用native方法获得驱动和磁盘交互的,IO速度限制 ...
- centos7如何安装pandoc
1 Install stack 1.1 Add the appropriate source repository: curl -sSL https://s3.amazonaws.com/downlo ...
- [转]Mac常用软件推荐
https://github.com/hzlzh/Best-App
- Python数据预处理—训练集和测试集数据划分
使用sklearn中的函数可以很方便的将数据划分为trainset 和 testset 该函数为sklearn.cross_validation.train_test_split,用法如下: > ...
- 利用requestjs优化响应式移动端js加载
html: <script data-main="main" src="require.js"></script> main.js re ...
- 从P1到P7——我在淘宝这7年（转）
作者: 赵超 发布时间: 2012-02-25 14:47 阅读: 114607 次 推荐: 153 [收藏] (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘 ...
- MongoDB本地安装与启用（windows ）
MongoDB的安装与MongoDB服务配置 Mongo DB 是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式备受当前IT从业人员的青睐.Mongo DB很好的实现了 ...
- 利用poi向excle写入数据
import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import org ...
- openstack私有云布署实践【15 创建租户网络+实例】
这里以办公网测试环境为例, (一)创建租户demo的网络 使用admin用户 source admin-openrc.sh 创建public公网 neutron net-create 1040 ...
- JUit——（三）JUnit核心对象（测试、测试类、Suit和Runner）
JUnit的核心对象:测试.测试类.测试集(Suite).测试运行器 1. 测试: @Test注释的.公共的.不带有任何参数.并且返回void类型的方法 2. 测试类: 公共的,包含对应类的测试方法的 ...