/*

思路总结：

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. [Android学习笔记]获取view的尺寸和坐标

    对于UI方面很多时候需要获取它的很多信息,具体情况见view的文档 View文档 http://developer.android.com/training/index.html 常用方法:获取vie ...

  2. libuv 与 libev 的对比

    libuv 与 libev 的对比 libuv 与 libev 的对比 05 January 2013 libuv 和 libev ,两个名字相当相近的 I/O Library,最近有幸用两个 Lib ...

  3. VMware中linux与window目录共享

    在虚拟机下来实如今windows下共享一个目录: (前提已安装完毕vmtools:http://blog.csdn.net/pipisorry/article/details/21318931) 打开 ...

  4. 新出台的治理iMessage垃圾短信的规则

    工信部拟制定<通信短信息服务管理规定>,为治理垃圾短信提供执法根据.当中,对于苹果iMessage垃圾信息泛滥现象,工信部也将跟踪研究技术监測和防范手段.这意味着长期以来处于监管" ...

  5. ipv6加英文的中括号访问

    加英文的中括号就可以,如[2001:4998:c:e33::1004],我发现这是yahoo首页.但并不是所有IPv6网站都可以通过IPv6地址访问,跟IPv4一样,网站服务器端可以只绑定域名,不接受 ...

  6. 快速入门github的方法

    Sometimes you just need a little help. ps:官方的帮助,原汁原味的帮助!强烈推荐 https://help.github.com/ Pro Git Book C ...

  7. mongodb中的排序和索引快速学习

    在mongodb中,排序和索引其实都是十分容易的,先来小结下排序: 1 先插入些数据    db.SortTest.insert( { name : "Denis", age : ...

  8. Filter基金会

    一个.总结 简单的说,Filter的作用就是拦截(Tomcat的)service(Request,Response)方法.拿到Request.Response对象进行处理.然后释放控制.继续自己主动流 ...

  9. class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  10. Android编程心得-图片自适应心得

    在Android 的开发过程中,我们知道存放图片资源的文件夹是drawable,与它类似的名字的文件夹drawble-hdpi,drawable-ldpi,drawable-mdpi,drawable ...