这次是完整版，网页点开就能自动播放

  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.          .pto4 {
  60.              width: 400px;
  61.              height: 200px;
  62.              background: #f2ee36;
  63.              display: none;
  64.          }
  65.  
  66.          .btn {
  67.              width: 30px;
  68.              height: 30px;
  69.              position: absolute;
  70.          }
  71.  
  72.          .btn1 {
  73.              left: 0;
  74.              top: 85px;
  75.              background: url("img/left.png");
  76.          }
  77.  
  78.          .btn2 {
  79.              right: 0;
  80.              top: 85px;
  81.              background: url("img/right.png");
  82.          }
  83.  
  84.          .circleBtn {
  85.              position: absolute;
  86.              top: 170px;
  87.              right: 172px;
  88.              width: 56px;
  89.              height: 10px;
  90.              zoom: 1;
  91.          }
  92.  
  93.          .circleBtn span {
  94.              width: 10px;
  95.              height: 10px;
  96.              margin: 0 2px;
  97.              float: left;
  98.              cursor: pointer;
  99.              background: url("img/cir.png");
  100.          }
  101.  
  102.          .circleBtn .light {
  103.              background: url("img/oncir.gif");
  104.          }
  105.      </style>
  106.  
  107.  </head>
  108.  
  109.  <body>
  110.      <div class="photo" id="main">
  111.          <div class="main">
  112.              <ul class="main1" id="amain">
  113.                  <li class="pto pto1">one</li>
  114.                  <li class="pto pto2">two</li>
  115.                  <li class="pto pto3">three</li>
  116.                  <li class="pto pto4">four</li>
  117.              </ul>
  118.          </div>
  119.  
  120.          <span class="btn btn1" id="btn1"></span>
  121.          <span class="btn btn2" id="btn2"></span>
  122.  
  123.          <div class="circleBtn" id="circleBtn">
  124.              <span class="light"></span>
  125.              <span></span>
  126.              <span></span>
  127.              <span></span>
  128.          </div>
  129.  
  130.      </div>
  131.  
  132.  </body>
  133.  
  134.  </html>

下面的是js代码，函数的定义都有注释，不明白的可以看前面的单个焦点图的随笔，图片是img文件夹下

  1.  <script>
  2.          function $(id) {
  3.              return typeof id === "string" ? document.getElementById(id) : id;
  4.          }
  5.  
  6.          var btnleft = $("btn1");
  7.          var btnright = $("btn2");
  8.  
  9.          //1.先做按钮特效
  10.          //定义自定义函数用于按钮
  11.          function onBtn(one, two) {
  12.              one.style.background = two;
  13.          }
  14.          //当鼠标移动至左边按钮调用onBtn函数
  15.          btnleft.onmouseenter = function() {
  16.                  onBtn(this, "url(img/onleft.gif) no-repeat");
  17.              }
  18.              //同理
  19.          btnleft.onmouseleave = function() {
  20.                  onBtn(this, "url(img/left.png) no-repeat");
  21.              }
  22.              //当鼠标移动至右边按钮调用onBtn函数
  23.          btnright.onmouseenter = function() {
  24.                  onBtn(this, "url(img/onright.gif) no-repeat");
  25.              }
  26.              //同理
  27.          btnright.onmouseleave = function() {
  28.              onBtn(this, "url(img/right.png) no-repeat");
  29.          }
  30.  
  31.          //2.设置图片，小框同时移动
  32.          //定义变量
  33.          var pto = $("amain").getElementsByTagName("li");
  34.          var cirBtn = $("circleBtn").getElementsByTagName("span");
  35.          var index = 0;
  36.          var timer = null;
  37.          var div = $("main");
  38.  
  39.          //设置定时器timer
  40.          //timer = setInterval(autoPlayRight, 2000);
  41.  
  42.          //设置自动函数
  43.          function autoPlayRight() {
  44.              if (index < pto.length - 1) {
  45.                  index++;
  46.              } else {
  47.                  index = 0;
  48.              }
  49.              //调用清除图片函数
  50.              clearPto();
  51.              //调用显示图片函数，代入参数index
  52.              showPto(index);
  53.              //调用清除小框函数
  54.              clearBtn();
  55.              //调用显示小框函数，代入参数index
  56.              showBtn(index);
  57.  
  58.          }
  59.  
  60.          //定义清除图片的函数
  61.          function clearPto() {
  62.              for (var i = 0; i < pto.length; i++) {
  63.                  pto[i].style.display = "none";
  64.              }
  65.          }
  66.  
  67.          //定义显示图片的函数
  68.          function showPto(x) {
  69.              for (var i = 0; i < pto.length; i++) {
  70.                  if (i == x) {
  71.                      pto[i].style.display = "block";
  72.                  }
  73.              }
  74.          }
  75.  
  76.          //定义清除小框的函数
  77.          function clearBtn() {
  78.              for (var i = 0; i < cirBtn.length; i++) {
  79.                  cirBtn[i].className = "";
  80.              }
  81.          }
  82.  
  83.          //定义显示小框的函数
  84.          function showBtn(y) {
  85.              for (var i = 0; i < cirBtn.length; i++) {
  86.                  if (i == y) {
  87.                      cirBtn[i].className = "light";
  88.                  }
  89.                  //这里重要了，如果不把返回值赋值给index，鼠标离开小框，
  90.                  //自动循环会执行上一次的循环，而不是本次鼠标离开时，显示下一张图片
  91.                  index = y;
  92.              }
  93.          }
  94.  
  95.          //3.设置鼠标点击事件
  96.          btnright.onclick = autoPlayRight;
  97.          btnleft.onclick = btnLeft;
  98.  
  99.          function btnLeft() {
  100.              if (index == 0) {
  101.                  index = pto.length - 1;
  102.              } else {
  103.                  index--;
  104.              }
  105.              //调用清除图片函数
  106.              clearPto();
  107.              //调用显示图片函数，代入参数index
  108.              showPto(index);
  109.              //调用清除小框函数
  110.              clearBtn();
  111.              //调用显示小框函数，代入参数index
  112.              showBtn(index);
  113.          }
  114.  
  115.          //4.设置鼠标移动至焦点图上时候停止自动播放
  116.          //把定时器放入自定义函数方便调用
  117.          function start() {
  118.              timer = setInterval(autoPlayRight, 2000);
  119.          }
  120.  
  121.          //把清除定时器放入自定义函数便于调用
  122.          function stop() {
  123.              clearInterval(timer);
  124.          }
  125.          //鼠标进入焦点图则停止自动播放
  126.          div.onmouseenter = stop;
  127.          //鼠标离开则开始自动
  128.          div.onmouseleave = start;
  129.          //设置当前只有一个定时器
  130.          if (timer) {
  131.              clearInterval(timer);
  132.              timer = null;
  133.          }
  134.          //设置网页点开时就自动播放
  135.          start();
  136.  
  137.          //5.设置图片随小框变化
  138.          for (var i = 0; i < cirBtn.length; i++) {
  139.              cirBtn[i].id = i;
  140.              cirBtn[i].onmouseenter = function() {
  141.                  clearInterval(timer);
  142.                  //调用清除图片函数
  143.                  clearPto();
  144.                  //调用显示图片函数，代入参数index
  145.                  showPto(this.id);
  146.                  //调用清除小框函数
  147.                  clearBtn();
  148.                  //调用显示小框函数，代入参数index
  149.                  showBtn(this.id);
  150.              }
  151.  
  152.          }
    　　　　　　　</script>

 

javascript焦点图自动播放的更多相关文章

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

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

  2. javascript焦点图(根据图片下方的小框自动播放)

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

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

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

  4. javascript焦点图之垂直滚动

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

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

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

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

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

  7. 使用 iscroll 实现焦点图无限循环

    现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...

  8. jQuery可自动播放动画焦点图插件Koala

    Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放.该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图 ...

  9. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

随机推荐

  1. CodeForces 712D Memory and Scores

    $dp$,前缀和. 记$dp[i][j]$表示$i$轮结束之后,两人差值为$j$的方案数. 转移很容易想到,但是转移的复杂度是$O(2*k)$的,需要优化,观察一下可以发现可以用过前缀和来优化. 我把 ...

  2. 详细介绍Java垃圾回收机制

    垃圾收集GC(Garbage Collection)是Java语言的核心技术之一,之前我们曾专门探讨过Java 7新增的垃圾回收器G1的新特性,但在JVM的内部运行机制上看,Java的垃圾回收原理与机 ...

  3. hibernate中的sql语句

    hibernate的hql查询语句总结   在这里通过定义了三个类,Special.Classroom.Student来做测试,Special与Classroom是一对多,Classroom与Stud ...

  4. php 问答

    1,如何设置长生命期的session ? 将 session.cookie_lifetime ,session.gc_maxlifetime 的时间设置长一点. 2,为什么初始化session的时候报 ...

  5. F4IF_FIELD_VALUE_REQUEST 和 F4IF_INT_TABLE_VALUE_REQUEST的不同

    F4IF_FIELD_VALUE_REQUEST 和 F4IF_INT_TABLE_VALUE_REQUEST的不同 F4IF_FIELD_VALUE_REQUEST主要功能是将表里的字段对应的sea ...

  6. Request for the permission of type异常

    调用wcf调用的时候引发一个错误,错误信息如下: <Message>Request for the permission of type 'System.Configuration.Con ...

  7. 用border做一个移动端常见的返回按钮

    第一步 .hs1{ float: left; .mt(.25rem); .ml(.12rem); width: .3rem; height: .3rem; border-top: 2px solid ...

  8. xshell 注册码

    Xshell 5 注册码: 101210-450789-147200Xftp 5 注册码:101210-450789-147200 Xmanager 5 注册码:101210-450789-14720 ...

  9. fork()子进程与waitpid()

    #!/usr/bin/perl use warnings; use strict; use POSIX ":sys_wait_h"; $SIG{CHLD} = sub{ my $p ...

  10. python多进程,以及进程池并发

    模拟多进程 #!/usr/bin/env python#-*- coding:utf-8 -*-import timefrom multiprocessing import Process def s ...