/*

思路总结：

1.实现图片滚动的function、鼠标经时候获取当前li的index、设置ndex自己主动递增的函数、实现淡入淡出效果的函数

2.整个实现效果一传递index为主线

3.我的编写代码过程

---->a.先编写好实现图片切换的函数，这里主要是包括for历遍所以图片并设置display为none和传递index（这里把index赋值给inew）；

---->b.编写鼠标经过时候获取index，这里必须通过历遍和赋值把鼠标经过的index赋值个inew，并传递给能够实现图片切换的函数move（）；

---->c. 编写实现图片淡入淡出的效果函数

---->d.move（）函数的功能实现能够在编写鼠标经过li的事件和编写淡入淡出函数的时候飞开编写进去 ，这样思路就会顺畅一点

*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title></title>

    <style>

*{margin:0;padding:0;}

#wrap{

            width:500px;height:375px;overflow:hidden;margin:0 auto;

            position:relative;;

        }

        #list{

            position:absolute;

            bottom:10px;

            right:10px;

        }

        ul{

            list-style: none;





        }

        li{float:left;width:20px;height:20px;margin:1px 1px;

            border:1px #333333 dashed;text-align: center;line-height:

        20px;background-color:aquamarine;}

        .active{background-color:royalblue;}//鼠标经过li的时候，调用的样式

    </style>

    <script>

       window.onload= function ds() {

            var im = document.getElementById("box").getElementsByTagName("img");

            var list= document.getElementById("list").getElementsByTagName("li");

            var timer;

           var timers; //这里一共须要两个定时器，一个是针对自己主动切换图片的，一个是针对实现淡入淡出效果的

           var inew=0;

           var al=1;

           function cgs(){

               im[inew].style.filter="alpha(opacity="+al+')';

               im[inew].style.opacity=al/100;

               if(al<100){

                   al+=2;

               }

           }

            function move() {

                for (var i = 0; i < im.length; i++) {

                    list[i].className="";//这里必须是数组

                    im[i].style.display = "none";

                    al=0;

                    clearInterval(timers);





                }

                im[inew].style.display = "block";

                list[inew].className="active"

                timers=setInterval(cgs,10);





            }





            for (var i = 0; i < list.length; i++) {

                list[i].index = i;//这里必须把i赋值给list【i】，以此来获得index；（感觉这样解释不太对，还望给意见）

                list[i].onmouseover = function () {

                    inew = this.index; //获取鼠标经过时候的index

                    move();

                   // this.className = "active";//也能够在这里调用样式

                  }





            }

           timer=setInterval(function(){

                       inew++;

                       if(inew>=list.length){

                           inew=0;

                       }

                       move();

                   }

                   ,2000);





        }

        </script>

        </head>

<body>

<div id="wrap">

    <div id="box">

        <img src="images/00031.jpg">

        <img src="images/00032.jpg">

        <img src="images/00033.jpg">

        <img src="images/00034.jpg">

        <ul id="list">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </div>

</div>

</body>

</html>

javascript焦点图（能够自己主动切换 ）的更多相关文章

  1. “焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”仅需一个SuperSlidev2.1

    官网:http://www.superslide2.com/index.html 1. 标签切换 / 书签切换 / 默认效果 2. 焦点图 / 幻灯片 3. 图片滚动-左 4. 图片滚动-上 5. 图 ...

  2. javascript焦点图自动播放

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

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

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

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

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

  5. javascript焦点图之垂直滚动

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

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

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

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

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

  8. Jquery焦点图实例

    对于很多建站的朋友来讲,焦点图并不陌生,一般的企业站,门户站都会用到焦点图.我们平时在写html代码的时候,很多人为了省时省力,对于焦点图都是在网上下载一些人家写好的代码,直接套上去即可,很多时候我自 ...

  9. 超酷实用的jQuery焦点图赏析及源码

    焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效.今天我们要分享一些超酷而且实用的jQuery ...

随机推荐

  1. [C++]指针浅析

    Date: 2014-1-4 summary: 指针的简单理解,概念性的东西会比较多(100个人有100种理解,此处只代表我个人看法) Contents: 1.什么是指针 c++ primer plu ...

  2. dsp下基于双循环缓冲队列的视频采集和显示记录

    对最近在设计的视频采集和显示缓冲机制做一个记录,以便以后使用. 视频采集和显示缓冲机制,其实是参考了Linux下v4L2的驱动机制,其采用输入多缓冲frame,输出多缓冲的切换机制.简单的就是ping ...

  3. 从零开始，使用python快速开发web站点（2）

    书接上文.http://blog.csdn.net/i7788/article/details/10306595 首先是数据库的搭建,这里的django的数据模型搭建十分easy. no sql.ju ...

  4. 开源图计算框架GraphLab介绍

    GraphLab介绍 GraphLab 是由CMU(卡内基梅隆大学)的Select 实验室在2010 年提出的一个基于图像处理模型的开源图计算框架.框架使用C++语言开发实现. 该框架是面向机器学习( ...

  5. aix 下 实现goldengate 随os启动而自己主动启动的脚本

    aix 下 实现goldengate 随os启动而自己主动启动的脚本: 1.用oracle用户建立/u01/info.txt,文件内容例如以下: sh date start mgr 2.chmod + ...

  6. Web Api 2(Cors)Ajax跨域访问

    支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示   随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...

  7. AntiXSS - 支持Html同时防止XSS攻击

    AntiXSS - 支持Html同时防止XSS攻击 跨站脚本攻击(XSS)已经不是什么新鲜的话题了,甚至很多大公司也为此吃尽苦头.最简单直接的防范方法,就是不允许任何html标签输入,对用户输入进行编 ...

  8. 10招让你成为杰出的Java程序员（转）

    如果你是一个热衷于技术的 Java 程序员, 那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出. 1. 拥有扎实的基础和深刻理解 OO 原则 对于 Java 程序员,深刻理解 Ob ...

  9. poj3254（状压dp）

    题目连接:http://poj.org/problem?id=3254 题意:一个矩阵里有很多格子,每个格子有两种状态,可以放牧和不可以放牧,可以放牧用1表示,否则用0表示,在这块牧场放牛,要求两个相 ...

  10. 创建并使用静态库（ar 命令）

     创建并使用静态库(ar 命令)            archive命令的功能是:创建或改动归档文件或者从归档文件里析取信息.能够简单的理解为一个打包工具,将成员文件依照一定的规则构建到.a文件里, ...