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副本)是为了实现无缝切换效 ...
随机推荐
- CodeForces 669C Little Artem and Matrix GNU
模拟. 把操作记录一下,倒着复原回去. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cs ...
- IOS多线程加锁
注意:加锁位置不同产生结果不同 -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { / ...
- Ubuntu 14.04 绑定固定 IP
参考百度经验首先用root用户登录,然后输入你的root密码,如果不用root登录可以在命令之前添加sudo:然后编辑interfaces 文件,该文件位于/etc/network/下面, 执行如下命 ...
- Python基础知识学习_Day3
一.字典用法 字典是一种key-value数据类型,通过key获取具体value的内容,字典的特性是无序.去重. 增删改查用法如下: 1.1基本增删改查操作 name = {"," ...
- reposync 同步yum仓库
reposync 同步远程yum仓库到本地 OPTIONS -h, --help 显示帮助 -c CONFIG, --config=CONFIG ...
- 集成shareSDK的微信、QQ API导致cocoaPods找不到类symbol问题的解决方法
因为shareSDK的微信和QQ API都只支持32位的,而cocoaPods默认要支持64位的,所以如果在工程中导入这两个API会出问题. 解决方法我就不转载啦,原文在这里: http://blog ...
- 使用inno setup制作安装包
- c#中，委托Func的简单实践
c# 委托Func的简单实践最近才真正的接触委托,所以针对Func类型的委托,做一个实践练习. 首先说一些我对委托的初级理解:"就是把方法当做参数,传进委托方法里". 我平时用到的 ...
- 敏捷开发之Scrum
现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP... 为了不落后他人,于是我也开始学习Scrum,今天主要是对我最近阅读的相关资料,根据自己的理解,用自己的话来讲述Scrum中 ...
- 多标记学习--Learning from Multi-Label Data
传统分类问题,即多类分类问题是,假设每个示例仅具有单个标记,且所有样本的标签类别数|L|大于1,然而,在很多现实世界的应用中,往往存在单个示例同时具有多重标记的情况. 而在多分类问题中,每个样本所含标 ...