/*

思路总结：

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. [项目整理]Win32,MFC的可执行文件只能运行一次

    //第一种方法:控制release版本的exe文件只能运行一次 #ifndef _DEBUG //debug 版本中,项目属性-->预处理器 -->预处理定义: 有_DEBUG if (F ...

  2. hdu Crazy Circuits

    Crazy Circuits 题目: 给出一个电路板,从+极出发到负极. 如今给你电路板上的最小电流限制,要你在电流平衡的时候求得从正极出发的最小电流. 算法: 非常裸的有源汇最小流.安有源汇最大流做 ...

  3. MySQL多表查询之外键、表连接、子查询、索引

    MySQL多表查询之外键.表连接.子查询.索引 一.外键: 1.什么是外键 2.外键语法 3.外键的条件 4.添加外键 5.删除外键 1.什么是外键: 主键:是唯一标识一条记录,不能有重复的,不允许为 ...

  4. 警惕！iPhone 6即将上市 诈骗邮件已现身网络

    随着iPhone 6即将上市,各路小道消息已经開始满天飞.就在近几日,一些记者还收到了假的iPhone 6将要上市的通知邮件.趋势科技也收到了几封,下面是样本之中的一个: (垃圾邮件样本) 不清楚iP ...

  5. oracle 之 内存—鞭辟近里（一）

    oracle 之 内存—鞭辟近里(一) 今天是2013-07-8日,这几天一直都在寻找一本深入研究oracle内存的书籍,期间一波三折弄的自己神魂颠倒,但是还是被我拿下了,感谢支持我的朋友,这周打算把 ...

  6. linux下golang

    linux下golang的配置 linux下golang的配置 之前开发golang一直在windows下,今天在linux下试了一下 ,遇到一些梗,比如go 找不到 sync包.花了一小时全部解决, ...

  7. logstash+ElasticSearch+Kibana VS Splunk

    logstash+ElasticSearch+Kibana VS Splunk 最近帮磊哥移植一套开源的日志管理软件,替代Splunk． Splunk是一个功能强大的日志管理工具,它不仅可以用多种方式 ...

  8. Kdd Cup 2013 总结2

  9. mysql事务、触发器、视图、存储过程、函数

    存储过程: procedure 概念类似于函数,就是把一段代码封装起来, 当要执行这一段代码的时候,可以通过调用该存储过程来实现. 在封装的语句体里面,可以用if/else, case,while等控 ...

  10. orcl 删除重复的行

    delete from FOODDETAIL t where t.id in (select   t.id from FOODDETAIL where t.sendtime>=to_date(' ...