zoukankan      html  css  js  c++  java
  • 第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>

    运行效果:

  • 相关阅读:
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 最大的元素距离
    Java 第十一届 蓝桥杯 省模拟赛 递增序列
    Java 第十一届 蓝桥杯 省模拟赛 递增序列
    Java 第十一届 蓝桥杯 省模拟赛 最大的元素距离
  • 原文地址:https://www.cnblogs.com/le220/p/7589196.html
Copyright © 2011-2022 走看看