1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <title>Document</title>
  7.      <style type="text/css">
  8.          * {
  9.              margin: 0;
  10.              padding: 0;
  11.              font-size: 12px;
  12.          }
  13.  
  14.          .photo {
  15.              width: 400px;
  16.              height: 200px;
  17.              margin: 50px;
  18.              position: relative;
  19.          }
  20.  
  21.          .main {
  22.              width: 400px;
  23.              height: 200px;
  24.              position: relative;
  25.          }
  26.  
  27.          .main1 li {
  28.              width: 400px;
  29.              height: 200px;
  30.              list-style-type: none;
  31.          }
  32.  
  33.          .pto {
  34.              position: absolute;
  35.              left: 0;
  36.              top: 0;
  37.          }
  38.  
  39.          .pto1 {
  40.              width: 400px;
  41.              height: 200px;
  42.              background: red;
  43.          }
  44.  
  45.          .pto2 {
  46.              width: 400px;
  47.              height: 200px;
  48.              background: pink;
  49.              display: none;
  50.          }
  51.  
  52.          .pto3 {
  53.              width: 400px;
  54.              height: 200px;
  55.              background: blue;
  56.              display: none;
  57.          }
  58.  
  59.          .btn {
  60.              width: 30px;
  61.              height: 30px;
  62.              position: absolute;
  63.          }
  64.  
  65.          .btn1 {
  66.              left: 0;
  67.              top: 85px;
  68.              background: url("img/left.png");
  69.          }
  70.  
  71.          .btn2 {
  72.              right: 0;
  73.              top: 85px;
  74.              background: url("img/right.png");
  75.          }
  76.      </style>
  77.      <script type="text/javascript" src="jiaodiantujs.js">
  78.      </script>
  79.  
  80.  </head>
  81.  
  82.  <body>
  83.      <div class="photo" id="main">
  84.          <div class="main">
  85.              <ul class="main1" id="amain">
  86.                  <li class="pto pto1">one</li>
  87.                  <li class="pto pto2">two</li>
  88.                  <li class="pto pto3">three</li>
  89.              </ul>
  90.          </div>
  91.  
  92.          <span class="btn btn1" id="btn1"></span>
  93.          <span class="btn btn2" id="btn2"></span>
  94.  
  95.      </div>
  96.  </body>
  97.  
  98.  </html>
  1.  function $(id) {
  2.      return typeof id == "string" ? document.getElementById(id) : id;
  3.  }
  4.  window.onload = function() {
  5.      //老规矩,这里是定义变量
  6.      var pto = $("amain").getElementsByTagName("li");
  7.      var btnleft = document.getElementById("btn1");
  8.      var btnright = document.getElementById("btn2");
  9.      var idpto = 0;
  10.      //定义一个点击按钮背景图变色的函数,方便调用
  11.      function onpto(one, two) {
  12.          one.style.background = two;
  13.      }
  14.      //左边按钮没有鼠标移动到的时候
  15.      btnleft.onmouseenter = function() {
  16.          onpto(this, "url(img/onleft.gif) no-repeat");
  17.      }
  18.      //左边按钮鼠标移动到的时候
  19.      btnleft.onmouseout = function() {
  20.          onpto(this, "url(img/left.png) no-repeat");
  21.      }
  22.      //右边按钮没有鼠标移动到的时候
  23.      btnright.onmouseenter = function() {
  24.          onpto(this, "url(img/onright.gif) no-repeat");
  25.      }
  26.      //右边按钮鼠标移动到的时候
  27.      btnright.onmouseout = function() {
  28.          onpto(this, "url(img/right.png) no-repeat");
  29.      }
  30.      //定义一个用于图片消失的函数
  31.      function hidepto() {
  32.          for (var i = 0; i < pto.length; i++) {
  33.              pto[i].style.display = "none";
  34.  
  35.          }
  36.      }
  37.      //定义一个用于图片显示的函数
  38.      function showpto(id) {
  39.          for (var i = 0; i < pto.length; i++) {
  40.              //定义一个变量id,当id=i的时候则显示图片
  41.              if (i == id) {
  42.                  pto[i].style.display = "block";
  43.              }
  44.  
  45.          }
  46.      }
  47.      //鼠标点击左边的时候,切图
  48.      btnleft.onclick = function() {
  49.          hidepto();
  50.          //当idpto=0的时候,下次点击则是2,而pto.length-1则是2,所以
  51.          //所以,用赋值语句给idpto重新赋值
  52.          //为什么要pto.length-1,因为.length的长度是从1开始
  53.          if (idpto == 0) {
  54.              idpto = pto.length - 1;
  55.          } else {
  56.              idpto--;
  57.          }
  58.          showpto(idpto);
  59.      }
  60.      //鼠标点击右边时,切图
  61.      btnright.onclick = function() {
  62.          hidepto();
  63.          //同理,图片显示顺序是0123
  64.          if (idpto < pto.length - 1) {
  65.              idpto++;
  66.          } else {
  67.              idpto = 0;
  68.          }
  69.          showpto(idpto);
  70.      }
  71.  }

因为是注重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. Js的Url中传递中文参数乱码的解决

    一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: 2. 接收参数页面:test02.html 二:如何获取Url& ...

  2. Linux软件安装管理 - CentOS (二)

    1. 软件包管理简介 2. rpm命令管理(Redhat Package Manager) 3. yum在线安装 3.1 yum源文件 vi /etc/yum.repos.d/CentOS-Base. ...

  3. 关于数据汇总方面返回Json数据的小小心得

    在一开始的开发中,计算好相关数据,然后通过 1.拼串 2.实例化Dictory对象再通过JavaScriptSerializer转换为json. 其中,2只适合于二维数据.1适合多维数据,但拼串比较费 ...

  4. Unity性能优化——LOD技术

    LOD,中文名多层次细节,是游戏中最常用的技术,它按照模型的位置和重要程度决定物体渲染的资源分配,降低非重要物体的面数和细节度,从而获得高效率的渲染运算.今天我们来实现使用它来做一个简单的优化例子. ...

  5. vultr vps新增reserved IPs功能，保留服务器原有IP

    高性价比海外vps品牌vultr vps宣布一项新功能叫“reserved IPs”,顾名思义是帮助你保留服务器IP地址,以备后用. 这个需求是因为用户经常新建.删除一个vps服务器,默认分配的是随机 ...

  6. Layer 中自定义属性的动画

    原文:http://objccn.io/issue-12-2/ Layer 中自定义属性的动画     默认情况下,CALayer 及其子类的绝大部分标准属性都可以执行动画,无论是添加一个 CAAni ...

  7. C#与C++中struct和class的小结

    在C#中,struct其实也是可以像class一样封装方法和数据的.请参考如下代码. using System; namespace testDiffInStructClass { public st ...

  8. layer1.8UI

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. Knockout js 绑定 radio 时，当绑定整形的时候，绑定不生效

    解决方案: 使用checkedValue和checked 组合,如下代码. <div><input type="radio" name="flavorG ...

  10. LWP::UserAgent介绍2

    #这个LWP::UserAgent一般要配合其他模块使用 #比如: #HTTP::Request #HTTP::Cookie #HTTP::Respose #HTTP::Status #LWP::Us ...