首页 > 代码库 > javascript焦点图（暂时不能自动切换）

javascript焦点图（暂时不能自动切换）

2024-07-03 13:27:47   230人阅读

<!DOCTYPE >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css.css"/>
    <title></title>
    <script>
        window.onload=function() {
            var img=document.getElementById("img").children;
            var lis=document.getElementById(‘ul‘).getElementsByTagName("li"); //这里是获取需要执行动态效果的demo
            var iNow;
            function move(){   //这里是实现切换的函数
                for(i=0;i<img.length;i++){    // 必须通过for循环来获取图片的index，这样才可以获取点击事件传来的index
                    img[i].style.display=‘none‘;
                }


                img[iNow].style.display=‘block‘;


            }


            for (i=0;i<lis.length;i++){ //这里必须通过for循环来获取点击li的时候的index，
                lis[i].index=i;
               lis[i].onclick=function (){
                    iNow=this.index;  //点击的时候传递index
                    move();    //运行实现切换效果的函数
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div id="img">
    <img src=http://www.mamicode.com/"images/00031a.jpg" style="display: block;">
     <img src=http://www.mamicode.com/"images/00032a.jpg" style="display: none;">
      <img src=http://www.mamicode.com/"images/00033a.jpg" style="display: none">
        </div>
    <ul id="ul">
        <li class="list1">1</li>
        <li class="list2">2</li>
        <li class="list3">3</li>
    </ul>
</div>
</body>
</html>


联系
我们