html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方

  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.  
  77.          .circleBtn {
  78.              position: absolute;
  79.              top: 170px;
  80.              right: 182px;
  81.              width: 42px;
  82.              height: 10px;
  83.              zoom: 1;
  84.          }
  85.  
  86.          .circleBtn span {
  87.              width: 10px;
  88.              height: 10px;
  89.              margin: 0 2px;
  90.              float: left;
  91.              cursor: pointer;
  92.              background: url("img/cir.png");
  93.          }
  94.  
  95.          .circleBtn .light {
  96.              background: url("img/oncir.gif");
  97.          }
  98.      </style>
  99.      <script type="text/javascript" src="jiaodiantujs.js">
  100.      </script>
  101.  
  102.  </head>
  103.  
  104.  <body>
  105.      <div class="photo" id="main">
  106.          <div class="main">
  107.              <ul class="main1" id="amain">
  108.                  <li class="pto pto1">one</li>
  109.                  <li class="pto pto2">two</li>
  110.                  <li class="pto pto3">three</li>
  111.              </ul>
  112.          </div>
  113.          <!--
  114.          <span class="btn btn1" id="btn1"></span>
  115.          <span class="btn btn2" id="btn2"></span>
  116.          -->
  117.          <div class="circleBtn" id="circleBtn">
  118.              <span class="light"></span>
  119.              <span></span>
  120.              <span></span>
  121.          </div>
  122.  
  123.      </div>
  124.  </body>
  125.  
  126.  </html>

下面是javacript部分

  1.  function $(id) {
  2.      return typeof id === "string" ? document.getElementById(id) : id;
  3.  }
  4.  window.onload = function() {
  5.      //pto变量为所展示的图片集和
  6.      var pto = $("amain").getElementsByTagName("li");
  7.      //定义一个span标签的集合cirBtn
  8.      var cirBtn = $("circleBtn").getElementsByTagName("span");
  9.      //定义一个全局变量
  10.      var index = 0;
  11.      //定义一个setInterval方法cirTimer
  12.      var cirTimer = null;
  13.  
  14.      for (var i = 0; i < cirBtn.length; i++) {
  15.          //给图片加上id=0,1,2
  16.          cirBtn[i].id = i;
  17.          //鼠标移动邦定触发事件:显示当前id对应的图片
  18.          cirBtn[i].onmouseenter = function() {
  19.                  //先停止自动循环
  20.                  clearInterval(cirTimer);
  21.                  //隐藏图片和小框
  22.                  clearBtn();
  23.                  //显示当前id对应的图片和小框
  24.                  showBtn(this.id);
  25.              }
  26.              //鼠标离开触发事件:自动循环
  27.          cirBtn[i].onmouseout = function() {
  28.              cirTimer = setInterval(autoPlay, 2000);
  29.          }
  30.      }
  31.      //设置当前只有一个定时器cirTimer
  32.      if (cirTimer) {
  33.          clearInterval(cirTimer);
  34.          cirTimer = null;
  35.      }
  36.  
  37.      cirTimer = setInterval(autoPlay, 2000);
  38.  
  39.      //自动循环函数
  40.      function autoPlay() {
  41.          //当index小于2则++,否则就是超过长度,则归0即index=0
  42.          if (index < cirBtn.length - 1) {
  43.              index++;
  44.          } else {
  45.              index = 0;
  46.          }
  47.          //console.log(index);
  48.          //清除函数
  49.          clearBtn();
  50.          //显示函数
  51.          showBtn(index);
  52.      }
  53.  
  54.      //定义一个隐藏图片和小框的函数
  55.      function clearBtn() {
  56.          for (var i = 0; i < cirBtn.length; i++) {
  57.  
  58.              cirBtn[i].className = "";
  59.              pto[i].style.display = "none";
  60.          }
  61.      }
  62.      //定义一个显示当前id对应的图片和小框的函数
  63.      function showBtn(x) {
  64.          for (var i = 0; i < cirBtn.length; i++) {
  65.              console.log(x);
  66.              if (i == x) {
  67.                  cirBtn[i].className = "light";
  68.                  pto[i].style.display = "block";
  69.              }
  70.              //这里重要了.这里把x赋值给index是为了让循环从停止的id重新开始循环
  71.              index = x;
  72.          }
  73.      }
  74.  
  75.  }

javascript焦点图(根据图片下方的小框自动播放)的更多相关文章

  1. javascript焦点图自动播放

    这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. javascript焦点图之缓冲滚动无缝切换

    在用于实现无缝切换四张图,所以设置了6个图片就是 4,0,1,2,3,4,0 <!DOCTYPE html> <html> <head> <meta char ...

  3. javascript焦点图自动缓冲滚动

    html中调用的js库,之前的随笔中有写,就不细说了,不明白的可以留言给我 <!DOCTYPE html> <html> <head> <meta chars ...

  4. javascript焦点图之垂直滚动

    html代码布局,需要用到定位,不细说了 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. javascript焦点图左右按钮简单自动轮播

    这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. 黄聪：手机移动端建站Jquery+CSS3+HTML5触屏滑动特效插件、实现触屏焦点图、图片轮展图

    前言 TouchSlide 可以说是 SuperSlide 手机简化版,不同的地方在于:1.TouchSlide是纯javascript开发的,不依赖任何js库,鉴于此,TouchSlide调用方法和 ...

  7. javascript焦点图（能够自己主动切换 ）

    /* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...

  8. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

  9. （转）轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程

    myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左 ...

随机推荐

  1. 如何在MyEclipse中配置jre的编译运行环境

    由于在MyEclipse中已经自带了jre编译环境,但由于版本太低,所以有时候需要将编译环境配置为系统的jre版本.在MyEclipse中配置jre的编译运行环境很简单,只需要全局配置一次,则所有项目 ...

  2. UIAlerView、UIActionSheet 和UIAlertViewController(点击注销确认按钮实现）

    - (IBAction)loginOut:(UIBarButtonItem *)sender { UIActionSheet *actionSheet = [[UIActionSheet alloc] ...

  3. C#下在图片文件本地

    //C#下载图片文件到本地,c#,c#下载,下载图片,下载文件,下载函数// 从图片地址下载图片到本地磁盘// 将二进制文件保存到磁盘 using System;using System.Drawin ...

  4. C/C++-style输入输出函数

    C风格的输入输出 (1) int getchar() 与 int putchar(int c) getchar从stdin输入流中读取字符,每次只能读取一个字符.若想一次性读取多个字符,则可将其放入循 ...

  5. 通过反射获取所有的Action 一般用于权限管理

    public IList<ActionPermission> GetAllActionByAssembly() { var result = new List<ActionPermi ...

  6. 4、Xcode8中的钥匙串保存数据取出时候为空的问题

    Xcode7以及之前的版本直接使用Keychain存储数据即可,但是从Xcode8开始,再用之前的方法会发现,读取不到存进去的数据了,或者说,存储不进去了,原因是苹果加强了隐私保护,这个东西需要打开开 ...

  7. hibernate异常：org.hibernate.NonUniqueObjectException

    异常:org.hibernate.NonUniqueObjectException 提示:a different object with the same identifier value was a ...

  8. [笔记]The Linux command line

    Notes on The Linux Command Line (by W. E. Shotts Jr.) edited by Gopher 感觉博客园是不是搞了什么CSS在里头--在博客园显示效果挺 ...

  9. JAVA多态问题总结（课堂总结）

    面向对象的三大特性:封装.继承.多态.从一定角度来看,封装和继承几乎都是为多态而准备的.这是我们最后一个概念,也是最重要的知识点.多态的定义:指允许不同类的对象对同一消息做出响应.即同一消息可以根据发 ...

  10. MapReduce库类

    Hadoop除了可以让开发人员自行编写map函数和reduce函数,还提供一些常用函数(mapper.reducer和partitioner)的类库,这些类位于 org.apache.hadoop.m ...