专栏首页前端知识分享第42天:焦点图

第42天:焦点图

1、焦点图

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>焦点图</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         ul,ol{
 12             list-style: none;
 13         }
 14         img{
 15             border: none;
 16         }
 17         .box{
 18             width: 490px;
 19             height: 170px;
 20             margin:100px auto;
 21             overflow: hidden;
 22             position: relative;
 23         }
 24         .box ul{
 25             width: 500%;
 26             position: absolute;
 27             left:0;
 28             top:0;
 29         }
 30         .box ul li{
 31             float: left;
 32         }
 33         .box ol{
 34             width: 180px;
 35             position: absolute;
 36             right:20px;
 37             bottom: 10px;
 38 
 39         }
 40         .box ol li{
 41             float: left;
 42             width: 18px;
 43             height: 18px;
 44             border:1px solid #c1c1c1;
 45             background-color: #f1f1f1;
 46             color: #000000;
 47             text-align: center;
 48             margin-left: 10px;
 49             line-height:18px;
 50         }
 51         .box ol .current{
 52             background-color: yellow;
 53             cursor: pointer;
 54         }
 55          </style>
 56 </head>
 57 <body>
 58  <div class="box" id="jd">
 59      <div id="inner">
 60          <ul >
 61              <li><img src="images/01.jpg" alt=""></li>
 62              <li><img src="images/02.jpg" alt=""></li>
 63              <li><img src="images/03.jpg" alt=""></li>
 64              <li><img src="images/04.jpg" alt=""></li>
 65              <li><img src="images/05.jpg" alt=""></li>
 66          </ul>
 67      </div>
 68      <ol >
 69          <li class="current">1</li>
 70          <li>2</li>
 71          <li>3</li>
 72          <li>4</li>
 73          <li>5</li>
 74      </ol>
 75  </div>
 76  <script>
 77      var box=document.getElementById("jd");
 78      var ul=jd.children[0].children[0];
 79      var ol=jd.children[1];
 80      var olis=ol.children;
 81      for(var i=0;i<olis.length;i++){
 82           olis[i].index=i;//得到li的索引值
 83          olis[i].onmouseover=function(){
 84              for(var j=0;j<olis.length;j++){
 85              olis[j].className="";
 86              }
 87              this.className="current";
 88              target=this.index*(-490);//当前索引号乘以一个盒子的宽度
 89 
 90          }
 91      }
 92 
 93      var leader=0;
 94      var target=0;
 95      setInterval(function(){
 96          leader=leader+(target-leader)/10;
 97          ul.style.left=leader+"px";
 98      },30);
 99 
100  </script>
101 </body>
102 </html>

运行效果:

2、左右焦点图

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>左右轮播图</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         ul{
 12            list-style: none;
 13         }
 14         img{
 15             border:none;
 16         }
 17         .all{
 18             width: 520px;
 19             height: 280px;
 20             margin: 100px auto;
 21             position: relative;
 22             overflow: hidden;
 23         }
 24         .all ul{
 25             width: 500%;
 26             position: absolute;
 27             left:0;
 28             top:0;
 29         }
 30         .all ul li{
 31             float: left;
 32         }
 33         #arr{
 34             display: none;
 35         }
 36         #arr span{
 37             display: block;
 38             position: absolute;
 39             top:50%;
 40             margin-top: -40px;
 41             width: 40px;
 42             height: 80px;
 43             text-align: center;
 44             background-color: #888888;
 45             opacity: 0.8;
 46             color: #333333;
 47             line-height:80px;
 48             font-size: 30px;
 49             cursor: pointer;
 50         }
 51         #arr #left{
 52             left: 0;
 53         }
 54         #arr #right{
 55             right:0;
 56         }
 57     </style>
 58 </head>
 59 <body>
 60     <div class="all" id="box">
 61         <div id="ad">
 62             <ul id="imgs">
 63                 <li><img src="images/1.jpg" alt=""></li>
 64                 <li><img src="images/2.jpg" alt=""></li>
 65                 <li><img src="images/3.jpg" alt=""></li>
 66                 <li><img src="images/4.jpg" alt=""></li>
 67                 <li><img src="images/5.jpg" alt=""></li>
 68             </ul>
 69         </div>
 70         <div id="arr"><span id="left"><</span><span id="right">></span></div>
 71     </div>
 72 </body>
 73 
 74 </html>
 75 <script>
 76     function $(id){return document.getElementById(id);}
 77     var box=document.getElementById("box");
 78     box.onmouseover=function(){
 79         $("arr").style.display="block";
 80     };
 81     box.onmouseout=function(){
 82         $("arr").style.display="none";
 83     };
 84     $("right").onclick=function(){//右边按钮
 85         target-=520;
 86     };
 87     $("left").onclick=function(){//左边按钮
 88         target+=520;
 89     };
 90 
 91     //缓动动画
 92     var leader=0;
 93     var target=0;
 94     setInterval(function(){
 95         if(target>=0){
 96             target=0;
 97         }else if(target<=-2080){
 98             target=-2080;
 99         }
100         leader=leader+(target-leader)/10;
101         $("imgs").style.left=leader+"px";
102     },30)
103 </script>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第21天:京东页面轮播图

    半指温柔乐
  • 第72天:jQuery实现下拉菜单

    1、块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度

    半指温柔乐
  • 第62天:手风琴效果

    半指温柔乐
  • 一个纯HTML+CSS写的下拉导航动画

    动画效果大概是鼠标放上去之后,从下往上慢慢提起来。比较重要是属性是“visibility”,才发现visibility可以这么用...

    德顺
  • 利用JQuery实现左侧菜单栏可折叠功能

    今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍...

    林老师带你学编程
  • JavaScript 使用getElementsByTagName获取元素

    可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作...

    Devops海洋的渔夫
  • 获取元素

    例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,再对其进行操作。

    星辰_大海
  • JavaScript-事件委托(事件代理)

    今天给自己的知识结构填个坑,再复习下JS的事件代理。 事件代理可以给JS批量生成的DOM元素添加事件,并且还可以提高效率,因为你确实不用给每个DOM节点添加事件...

    web前端教室
  • 如何将文章列表用<li>分两列显示

      我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们?   其实相对比较简单,用几行css样...

    ytkah
  • Cypress学习12-父子元素定位

    若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

    上海-悠悠

扫码关注云+社区

领取腾讯云代金券