javascript焦点图(可以自动切换 )

/*

思路总结:

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.οnlοad= 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆康永

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值