javascript焦点图左右按钮简单自动轮播
这里把css和html合在一块写了，这块代码只是布局和样式不是重点
<!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>
下面是Javascript代码，主要是通过左右两个按钮来控制图片左右切换
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
//pto变量为所展示的图片集和
var pto = $("amain").getElementsByTagName("li");
//btnleft和right为两个按钮
var btnleft = $("btn1");
var btnright = $("btn2");
//div变量为设置停止图片显示所需
var div = $("main");
//idBtn为当前图片的id
var idBtn = 0;
//setInterval函数所需的函数名timer
var timer = null;
//自定义一个函数用于按钮变换
function changeBtn(one, two) {
one.style.background = two;
}
//鼠标移动至左按钮时，套用自定义函数
btnleft.onmouseenter = function() {
//this表示当前btnleft的背景
changeBtn(this, "url(img/onleft.gif) no-repeat");
}
//鼠标离开至左按钮时，套用自定义函数
btnleft.onmouseout = function() {
//this同理
changeBtn(this, "url(img/left.png) no-repeat");
}
//鼠标移动至右按钮时，套用自定义函数
btnright.onmouseenter = function() {
changeBtn(this, "url(img/onright.gif) no-repeat");
}
//同理
btnright.onmouseout = function() {
changeBtn(this, "url(img/right.png) no-repeat");
}
//clearPto函数表示隐藏图片
function clearPto() {
for (var i = 0; i < pto.length; i++) {
pto[i].style.display = "none";
}
}
//showPto函数表示显示当前图片
function showPto(y) {
//局部变量y，为当前鼠标点击的id
for (var i = 0; i < pto.length; i++) {
//console.log(y);
//当点击的id和图片id，也就是y相等时候，显示图片
if (i == y) {
pto[i].style.display = "block";
}
}
}
//鼠标左击绑定函数
btnleft.onclick = function() {
//当idBtn为0 ，左击则，下一张为2，所以把长度2 赋值给idBtn
if (idBtn == 0) {
idBtn = pto.length - 1;
} else {
//同理，当不为0时，所显示的为小于当前所以要--
idBtn--;
}
//套用函数
clearPto();
//if语句结束，把idBtn代入函数中
showPto(idBtn);
}
btnright.onclick = function() {
//当idBtn小于长度，则左右为下一张，所以idBtn++
if (idBtn < pto.length - 1) {
idBtn++;
} else {
//超出长度，则下一张为0，所以把0赋值
idBtn = 0;
}
clearPto();
showPto(idBtn);
}
//判断语句，设置当前只有一个timer函数执行
if (timer) {
clearInterval(timer);
timer = null;
}
//鼠标离开div，则执行函数
div.onmouseout = start;
//鼠标移到div，则停止自动轮播
div.onmouseover = stop;
start();
//setInterval函数详情可以自行百度，不多解释
function start() {
timer = setInterval(function() {
btnright.onclick();
}, 2000);
}
function stop() {
clearInterval(timer);
}
}
javascript焦点图左右按钮简单自动轮播的更多相关文章
- javascript焦点图自动播放
这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 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焦点图自动缓冲滚动
html中调用的js库,之前的随笔中有写,就不细说了,不明白的可以留言给我 <!DOCTYPE html> <html> <head> <meta chars ...
- javascript焦点图（能够自己主动切换 ）
/* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...
- 8款超绚丽的jQuery焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- 西山居首页jQuery焦点图代码
西山居首页jQuery焦点图代码是一款带文字描述,左右箭头,索引按钮,自动轮播切换的jQuery特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div style ...
随机推荐
- CodeForces 708B Recover the String
构造. 根据$a[0][0]$可以求得$0$的个数$p$,根据$a[1][1]$可以求得$1$的个数$q$. 如果找不到$p$或$q$,那么就无解. 每一个$0$放到序列中的任何一个位置,假设和前面的 ...
- 消息队列 RabbitMQ 与 Spring 整合使用
一.什么是 RabbitMQ RabbitMQ 是实现 AMQP(高级消息队列协议)的消息中间件的一种,最初起源于金融系统,用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面表现不俗.消 ...
- WinForms 实现气泡提示窗口（转载）
[实例说明] 气泡提示因为他的美观又好被大多数用户所接收,用户所喜爱的就是程序员要实现的. 本实例实现了任务栏气泡提示,运行本实例,效果图如下所示: 单击提示.气泡提示就会显示,单击“关闭”气泡又会消 ...
- windows 开机自动启动方案
方案1: 把要启动的软件的快捷方式放到启动菜单对应的目录里,就像下面这个路径: C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Sta ...
- CNN- 数据预处理
对于CNN输入的数据,常见的有三种处理方式: 1.Mean subtraction. 将数据的每一维特征都减去平均值.在numpy 中 X -= np.mean(X, axis = 0) 2.Nor ...
- 2.MyBatis有代理增删改
2.1 创建一个javaweb项目MyBatis_Part1,并创建如下sql脚本 create user holly identified by sys; grant dba to holly; c ...
- <hdu - 3999> The order of a Tree 水题 之 二叉搜索的数的先序输出
这里是杭电hdu上的链接:http://acm.hdu.edu.cn/showproblem.php?pid=3999 Problem Description: As we know,the sha ...
- NYOJ-47 过河问题（贪心）
过河问题 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 在漆黑的夜里,N位旅行者来到了一座狭窄而且没有护栏的桥边.如果不借助手电筒的话,大家是无论如何也不敢过桥去的 ...
- 向多个会话窗口发送命令 -SecureCRT
1.前提 一个服务可能部署在多台机器上,这时如果要查问题,最繁复的方法就是打开该服务的每个session,把命令在每一台机器上复制一下执行,找到相关的日志:还有一种方法就是一条命令同时向多个会话窗口发 ...
- 使用sublime text3 连接sftp/ftp（远程服务器）
首先说明的是Sumblime Text 3,下载安装后,打开软件 在红色箭头指定的控制区域粘贴下面这段英文 import urllib.request,os,hashlib; h = '2915d18 ...