<!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点击焦点图的更多相关文章

  1. [javascript]一段焦点图的js代码

    <html> <head> <meta name="name" content="content"charset="ut ...

  2. 手风琴式焦点图jQuery特效

    手风琴式焦点图jQuery特效是一款鼠标点击人物图像滑动切换案例说明信息代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="ag-cont ...

  3. 基于jQuery的轮播焦点图图

    轮播焦点图 ——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样. 本例来源:站长之家http://sc.chinaz.com/jiaobe ...

  4. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  5. jquery自动焦点图

    效果预览:http://runjs.cn/detail/vydinibc  带左右箭头的自动焦点图:http://runjs.cn/detail/wr1d1keh html: <div clas ...

  6. 基于jQuery带标题的图片3D切换焦点图

    今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...

  7. 移动web：图片切换(焦点图)

    在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...

  8. jQuery 焦点图,图像文件js档

    jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...

  9. 正益无线首页jQuery焦点图

    分享一款正益无线首页jQuery焦点图,带索引按钮,自动轮播切换特效焦点图代码. 在线预览   源码下载 实现的代码. html代码: <div id="slideBox" ...

随机推荐

  1. @ResponseBody注解与JSON

    MappingJacksonHttpMessageConverter 调用了 objectMapper.writeValue(OutputStream stream, Object)方法,使用@Res ...

  2. node + express 资料

    https://www.youtube.com/watch?v=65a5QQ3ZR2g&list=PL55RiY5tL51oGJorjEgl6NVeDbx_fO5jR https://www. ...

  3. linux kernel module

    #include <linux/init.h>#include <linux/module.h>#include <linux/kernel.h> static i ...

  4. ubuntu 14.04—解决软件中心进度条卡死的问题

    软件中心下载安装软件进度条卡住了,这时候解决方法为: 先解锁: sudo rm -rf /var/lib/dpkg/lock 如果此时开启软件中心,发现进度还在, 那么我们需要找到相关的进程关闭他,使 ...

  5. .a与.framework的区别

    库是共享程序代码的方式,一般分为静态库和动态库. 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. iOS中静态库形式: .a和.framework 动态库:链接时不复制,程序运行 ...

  6. ES CPU和磁盘IO升高

    问题 ES监控出现偶尔的波动,CPU和磁盘IO升高 有时候在凌晨,业务请求比较低,也没有慢查询,GC也比较正常,没有出现Full GC ES内部的merge segment会占用CPU和磁盘资源,怀疑 ...

  7. Linux Yum仓库介绍及服务端及客户端配置

    YUM服务器 适合在于内网使用,因为很多包需要国外的网站下载应用包,这样网络很不稳定 下载慢,所有为何不尝试搭建 自己内部的YUM服务器呢 YUM服务器搭建 一 创建yum仓库目录 #mkdir -p ...

  8. php系统无法上传图片问题

    PHP Warning:  File upload error - unable to create a temporary file in Unknown on line 0   我的测试环境是 w ...

  9. 浅谈Objective-C对象初始化的三类程序猿

    序 早上看了位仁兄写了<Swift:让人眼前一亮的初始化方式>的文章.什么?!初始化?Objective-C!好吧,吓哔哔~~~ 一.普通程序猿 普通程序员使用最常见路人姿势等场.普普通通 ...

  10. MD5加密 js文件

    var hexcase = 0; var b64pad = ""; var chrsz = 8; function hex_md5(s){ return binl2hex(core ...