/*

思路总结：

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. ThinkPHP 的模型使用详细介绍--模型的核心(七)

    原文:ThinkPHP 的模型使用详细介绍--模型的核心(七) 注意:本节是ThinkPhp框架对数据操作的核心处理部分 大家还是在这里看清楚可以将其剪切放到代码编辑器中查看 本章节给大家着重介绍模型 ...

  2. copy算法

     copy------强化效率无所不用其极 copy(first,last,result)算法可将输入区间[first,last)内的元素拷贝到输出区间[result,result+(last-f ...

  3. JavaScript 中的事件流和事件处理程序（读书笔记思维导图）

    JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...

  4. firefox同步数据时无响应问题

    之前设置了firefox的数据同步,可以在不同电脑上,同步自己的书签等信息,感觉很方便实用,最近在点工具立即同步时,不报错,书签也没有同步,没有任何响应: 后来查了许多网上资料,都不见效,无意间看到 ...

  5. SQL_由创建表引出

    ***********************************************声明*************************************************** ...

  6. k-d tree算法

    k-d树(k-dimensional树的简称),是一种分割k维数据空间的数据结构.主要应用于多维空间关键数据的搜索(如:范围搜索和最近邻搜索). 应用背景 SIFT算法中做特征点匹配的时候就会利用到k ...

  7. Android之场景桌面(一)

    声明:转载请务必注明出处,本文代码和主题仅供学习交流,请勿用于商业用途. 引言:最近Android场景桌面开始流行起来了,跟原始的Android桌面相比,场景桌面能逼真的模拟各种自然物体,并且通过点击 ...

  8. 网络编程——XML与JSON

    概述 如上篇博客点击打开链接介绍.互联网公司发布Web服务,于是开发者们就可以将其用到自己的应用中.Web服务的工作方式类似于浏览器,输入请求,按下回车,等待远程计算机响应.当响应返回时,浏览器会使用 ...

  9. 自定义Annotation

    来源:http://blog.csdn.net/lifetragedy/article/details/7394910 概念篇 来看一个最简单的annotation示例 @Target(Element ...

  10. Android---53---多线程下载

    采用HttpURLConnection HttpURLConnection从继承URLConnection,它也可以被用来发送到指定的网站GET求 POST求. 办法: int getResponse ...