JS下的图片轮播效果

来源：互联网发布：淘宝企业店铺负责人编辑：程序博客网时间：2024/06/02 08:18

难点
图片路径的更换

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            #a img{                border: 1px solid  gainsboro;                width: 500px;            }            #b img{                border: 1px solid  gainsboro;                width: 100px;            }            #b img:hover{                border: 1px solid red;            }        </style>        <script>            function over(obj){//obj表示的是this标签，src是img的属性，this指的是当前标签-img;                document.getElementById("img").src=obj.src;//当鼠标移动到小div上的时候，改变大div的图像路径            }        </script>    </head>    <body>        <div id="a">            <img id="img" src="img/01.jpg"  />        </div>        <div id="b">            <img src="img/01.jpg"  onmouseover="over(this)"/>            <img src="img/02.jpg"  onmouseover="over(this)"/>            <img src="img/03.jpg"  onmouseover="over(this)"/>            <img src="img/04.jpg"  onmouseover="over(this)"/>            <img src="img/05.jpg"  onmouseover="over(this)"/>        </div>    </body></html>

阅读全文

0 0