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;
} .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");
}
</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>
</body> </html>
function $(id) {
return typeof id == "string" ? document.getElementById(id) : id;
}
window.onload = function() {
//老规矩,这里是定义变量
var pto = $("amain").getElementsByTagName("li");
var btnleft = document.getElementById("btn1");
var btnright = document.getElementById("btn2");
var idpto = 0;
//定义一个点击按钮背景图变色的函数,方便调用
function onpto(one, two) {
one.style.background = two;
}
//左边按钮没有鼠标移动到的时候
btnleft.onmouseenter = function() {
onpto(this, "url(img/onleft.gif) no-repeat");
}
//左边按钮鼠标移动到的时候
btnleft.onmouseout = function() {
onpto(this, "url(img/left.png) no-repeat");
}
//右边按钮没有鼠标移动到的时候
btnright.onmouseenter = function() {
onpto(this, "url(img/onright.gif) no-repeat");
}
//右边按钮鼠标移动到的时候
btnright.onmouseout = function() {
onpto(this, "url(img/right.png) no-repeat");
}
//定义一个用于图片消失的函数
function hidepto() {
for (var i = 0; i < pto.length; i++) {
pto[i].style.display = "none";
}
}
//定义一个用于图片显示的函数
function showpto(id) {
for (var i = 0; i < pto.length; i++) {
//定义一个变量id,当id=i的时候则显示图片
if (i == id) {
pto[i].style.display = "block";
}
}
}
//鼠标点击左边的时候,切图
btnleft.onclick = function() {
hidepto();
//当idpto=0的时候,下次点击则是2,而pto.length-1则是2,所以
//所以,用赋值语句给idpto重新赋值
//为什么要pto.length-1,因为.length的长度是从1开始
if (idpto == 0) {
idpto = pto.length - 1;
} else {
idpto--;
}
showpto(idpto);
}
//鼠标点击右边时,切图
btnright.onclick = function() {
hidepto();
//同理,图片显示顺序是0123
if (idpto < pto.length - 1) {
idpto++;
} else {
idpto = 0;
}
showpto(idpto);
}
}
因为是注重javascript的过程，所以html和css就不细说了
javascript点击焦点图的更多相关文章
- [javascript]一段焦点图的js代码
<html> <head> <meta name="name" content="content"charset="ut ...
- 手风琴式焦点图jQuery特效
手风琴式焦点图jQuery特效是一款鼠标点击人物图像滑动切换案例说明信息代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="ag-cont ...
- 基于jQuery的轮播焦点图图
轮播焦点图 ——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样. 本例来源:站长之家http://sc.chinaz.com/jiaobe ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- jquery自动焦点图
效果预览:http://runjs.cn/detail/vydinibc 带左右箭头的自动焦点图:http://runjs.cn/detail/wr1d1keh html: <div clas ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- 移动web：图片切换(焦点图)
在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...
- jQuery 焦点图,图像文件js档
jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...
- 正益无线首页jQuery焦点图
分享一款正益无线首页jQuery焦点图,带索引按钮,自动轮播切换特效焦点图代码. 在线预览 源码下载 实现的代码. html代码: <div id="slideBox" ...
随机推荐
- PWM
#include "sys.h" #include "beep.h" //tim5 定时器 /* tim4 定时器 定时10分钟 控制LED1 */ void ...
- iOSAPP添加启动页
如果你在开发过程中出现屏幕显示内容比例不正常或者显示不全的问题,你发现不是代码或者约束的问题,那么很可能是启动页没有添加或者添加不全的原因,下面配一张问题图片上下黑屏 添加启动页步骤如下图 (1) ( ...
- 洛谷-统计数字-NOIP2007提高组复赛
题目描述 Description 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照 ...
- JQUERY 轮播插件
闲来无事,写个轮播插件,项目中用到的时候就无需在写了,不然会累死宝宝的 废话少说 代码上 html部分 <div class="lunbo"> <ul> & ...
- ASUS S46CB 刷BIOS
1. 从ASUS官网下载要新的BIOS文件: 地址:https://www.asus.com.cn/Notebooks_Ultrabooks/S46CB/HelpDesk_Download/ 2. 开 ...
- 解决gstreamer无法播放的bug
0 ls 1 ./start.sh 2 ps 3 kill 366 4 cd /usr/app/services/ 5 ./start.sh 6 cd ../ 7 ls 8 cd res/ 9 ls ...
- Maven手动增加依赖jar到本地Maven仓库中
Apache Maven是一个项目管理及自动构建工具,有APache软件基金会提供.我们只要配置成功后就可以通过配置pom.xml添加所需依赖的jar包和类库,因为这些类库已经在我们配置的Maven仓 ...
- 微信超时5s，调用客服接口异步回复消息（PHP）
当用户触发事件,如果不能保证在5s内响应,可以先返回success,然后异步调用返回的信息.代码如下: // 立即返回(异步执行) ignore_user_abort(true);//start=== ...
- 阿里云 CentOS7.2 配置FTP+Node.js环境
本人小白,写下这篇博客意在记录踩过的坑,大神请绕道~ 准备工作 安装自己喜欢的连接软件(一般是putty或者xshell),本人选择的是xshell,软件如图 : 通过软件中的ssh连接连接上已经购买 ...
- Scope Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...