js 淘宝焦点图

最新推荐文章于 2023-09-19 10:32:14 发布

看到了你

最新推荐文章于 2023-09-19 10:32:14 发布

阅读量458

点赞数 3

分类专栏： js 文章标签： js 淘宝焦点图

本文链接：https://blog.csdn.net/chen1042246612/article/details/88311929

版权

js 专栏收录该内容

23 篇文章 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>

看到了你

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 淘宝焦点图

&lt;!DOCTYPE html&gt;&lt;html lang="zh-cn"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;淘宝焦点图&lt;/title&gt; &lt;style&gt; body,ul,ol,li,img { margin: 0;...
复制链接

扫一扫