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副本)是为了实现无缝切换效 ...
随机推荐
- Chrome 插件自定义博客编辑界面
总觉得博客园的编辑器太白了,特别是在晚上,太明亮了刺眼.在后台设置里面找不到任何可以修改UI的地方,考虑用浏览器插件自己改一下.要是做得好,可以给大家一起用. 新建目录 E:/cnblog.js,添加 ...
- java实现线性表
/** * 线性表 * @author zyyt * */ public class LinkList {//框架级别的大师级 private int size;//链表的实际大小 private ...
- js事件监听-addEventListener (w3c标准) 和 attachEvent（ie）
研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...
- 斗地主 (NOIP2015 Day1 T3)
斗地主 张牌,因为它可以连在K后, 总体思路为 先出炸弹和四带二 再出三带一 再把对牌和单牌出完 记录并更新Answer,后枚举顺子,并继续向下搜索. 注意:弄明白题意,题目描述不太清楚....另外, ...
- Python学习笔记——基础篇【第二周】——解释器、字符串、列表、字典、主文件判断、对象
目录 1.Python介绍 2.Python编码 3.接受执行传参 4.基本数据类型常用方法 5.Python主文件判断 6.一切事物都是对象 7. int内部功能介绍 8.float和long内 ...
- mac 终端下ssh 登录远程服务器不发输入中文
转:https://segmentfault.com/q/1010000000150673 用Mac的iterm2 ssh连上去,终端显示中文乱码,也不能输入中文,然而本地终端可以显示和输入. 解决方 ...
- React学习笔记-03 state
每一个组件都有状态,比如一个开关,开 和 关,都是一种state.那么react是怎么管理它的state的? React 把用户界面当做状态机,可以轻松的让用户界面和数据保持一致.用户只需要更新组件的 ...
- 二十九、oracle 触发器
一.触发器简介 触发器的定义就是说某个条件成立的时候,触发器里面所定义的语句就会被自动的执行.因此触发器不需要人为的去调用,也不能调用.然后,触发器的触发条件其实在你定义的时候就已经设定好了.这里面需 ...
- Hadoop中Namenode的HA查询和切换
有一段时间没有关注公司服务器上自己搭的三台小型hadoop集群了,上星期公司机房停电了,这次上去start了集群,但是发现start之后无法工作了. 查看了jps发现该有的进程都有了,敲入 hadoo ...
- 下载、安装jdk8（Windows下）并配置变量环境
一.官网下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 点击下图中的downloa ...