/*

思路总结：

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. eclipse设置关联文件打开方式

    window->preferences: General->Editors->File Associations

  2. android app 架构设计02

    二:在开放的过程中,尽量把工具类,BaseActivity 放在指定的位置. DateFormat Bitmap Notification Shared Preference Environment ...

  3. 高效合并两个有序数组(Merge Sorted Array)

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: Y ...

  4. Enum的简单了解

    Enum可以将一组具名的有限集合创建成一种新的类型,而这些具名的值可以作为常规的程序组件使用. 在创建enum时,编译器会为你生成一个相关的类,这个类继承自java.lang.Enum,所以enum本 ...

  5. 【Cocos2d-X开发学习笔记】第30期：游戏中数据的存储（下）

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010 一.对数据进行编解码 在上一期中,我们使用了CC ...

  6. POJ 3340 &amp; HDU 2410 Barbara Bennett&#39;s Wild Numbers（数学）

    题目链接: PKU:http://poj.org/problem?id=3340 HDU:http://acm.hdu.edu.cn/showproblem.php?pid=2410 Descript ...

  7. LeetCode总结 -- 树的性质篇

    树的性质推断是树的数据结构比較主要的操作,一般考到都属于非常easy的题目,也就是第一道入门题.面试中最好不能有问题,力求一遍写对.不要给面试官不论什么挑刺机会.LeetCode中关于树的性质有下面题 ...

  8. 移动M站建设

    电商总结(五)移动M站建设   最近在一直在搞M站,也就是移动web站点.由于是第一次,也遇到了很多问题,所以把最近了解到的东西总结总结.聊一聊什么是移动M站,它有啥作用和优势. 也有人会问,M站和A ...

  9. 跟着ZHONGHuan学习设计模式--桥接模式

    转载请注明出处! ! !http://blog.csdn.net/zhonghuan1992 全部配套代码均在github上:https://github.com/ZHONGHuanGit/Desig ...

  10. hdu1394（线段树求逆序对）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1394 线段树功能:update:单点增减 query:区间求和 分析:如果是0到n-1的排列,那么如果 ...