首页 > 代码库 > javascript焦点图（能够自己主动切换 ）

javascript焦点图（能够自己主动切换 ）

2024-07-30 04:03:47   220人阅读

/*

思路总结：

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=http://www.mamicode.com/"images/00031.jpg">
        <img src=http://www.mamicode.com/"images/00032.jpg">
        <img src=http://www.mamicode.com/"images/00033.jpg">
        <img src=http://www.mamicode.com/"images/00034.jpg">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>
</body>
</html>

javascript焦点图（能够自己主动切换 ）


联系
我们