js 淘宝焦点图

淡淡的烟草味﹌ 2022-03-11 07:56 214阅读 0赞

> <!DOCTYPE html>  
> <html lang="zh-cn">  
> <head>  
>     <meta charset="UTF-8">  
>     <title>淘宝焦点图</title>  
>     <style>  
>         body,ul,ol,li,img \{  
>             margin: 0;  
>             padding: 0;  
>             list-style: none;  
>         \}
> 
>         \#box \{  
>             width: 520px;  
>             height: 280px;  
>             padding: 5px;  
>             position: relative;  
>             border: 1px solid \#ccc;  
>             margin: 100px auto 0;  
>             overflow: hidden;\`  
>         \}
> 
>         .ad \{  
>             width: 520px;  
>             height: 280px;  
>             position: relative;  
>         \}
> 
>         \#box img \{  
>             width: 520px;  
>         \}
> 
>         .ad ul li \{  
>             float: left;  
>         \}
> 
>         .ad ul \{  
>             position: absolute;  
>             top: 0;  
>             width: 2940px;  
>         \}
> 
>         \#focusD \{  
>             display: none;  
>         \}
> 
>         \#focusD span \{  
>             width: 40px;  
>             height: 40px;  
>             position: absolute;  
>             left: 5px;  
>             top: 50%;  
>             margin-top: -20px;  
>             background: \#000;  
>             cursor:pointer;  
>             line-height: 40px;  
>             text-align: center;  
>             font-weight: bold;  
>             font-family: '黑体';  
>             font-size: 30px;  
>             color: \#fff;  
>             opacity: 0.3;  
>             border: 1px solid \#fff;  
>         \}
> 
>         \#focusD \#right \{  
>             right: 5px;  
>             left: auto;  
>         \}  
>     </style>  
> </head>  
> <body>  
>     <div id="box" class="all">  
>         <div class="ad">  
>             <ul id="imgs">  
>                 <li><img src="images/01.jpg" alt=""></li>  
>                 <li><img src="images/02.jpg" alt=""></li>  
>                 <li><img src="images/03.jpg" alt=""></li>  
>                 <li><img src="images/04.jpg" alt=""></li>  
>                 <li><img src="images/05.jpg" alt=""></li>  
>             </ul>  
>         </div>  
>         <div id="focusD"><span id="left"><</span><span id="right">></span></div>  
>     </div>  
>     <script src="common.js"></script>  
>     <script>  
>         //获取最外面的div  
>         var box = my$("box");  
>         //获取相框  
>         var ad = box.children\[0\];  
>         //获取相框的宽度  
>         var imgWidth = ad.offsetWidth;  
>         //获取ul  
>         var ulObj = ad.children\[0\];  
>         //获取左右焦点的div  
>         var focusD = my$("focusD");
> 
>         //显示和隐藏左右焦点的div----为box注册事件  
>         box.onmouseover = function() \{  
>             focusD.style.display = "block";  
>         \};  
>         box.onmouseout = function() \{  
>             focusD.style.display = "none";  
>         \};  
>         index=0;  
>         //点击右边按钮  
>         my$("right").onclick = function() \{  
>             if(index < ulObj.children.length - 1) \{  
>                 index++;  
>                 animate(ulObj,-index\*imgWidth);  
>             \}  
>         \};
> 
>         //点击左边按钮  
>         my$("left").onclick = function() \{  
>             if(index > 0) \{  
>                 index--;  
>                 animate(ulObj,-index\*imgWidth);  
>             \}  
>         \};
> 
>         //设置任意的一个元素，移动到指定的目标位置  
>         function animate(element,target) \{  
>             clearInterval(element.timeId);  
>             //定时器的id值存储到对象的一个属性中  
>             element.timeId = setInterval(function() \{  
>                 //获取元素的当前位置,数字类型  
>                 var current = element.offsetLeft;  
>                 //每次移动的距离  
>                 var step = 10;  
>                 step = current < target ? step : -step;  
>                 //当前移动到位置  
>                 current += step;  
>                 if(Math.abs(current - target) > Math.abs(step)) \{  
>                     element.style.left = current +'px';  
>                 \} else \{  
>                     //清理定时器  
>                     clearInterval(element.timeId);  
>                     //直接到达目标  
>                     element.style.left = target + 'px';  
>                 \}  
>             \},20);  
>         \}  
>     </script>  
> </body>  
> </html>