zoukankan      html  css  js  c++  java
  • 焦点图的制作

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>焦点图</title>
     6 <link href="focus1.css" rel="stylesheet" type="text/css">
     7 </head>
     8 
     9 <body>
    10 <div id="focus">
    11   <div>        
    12    <ul id="img">
    13    <li><img src="http://img.mukewang.com/53ad2498000174af13660768.jpg" alt=""></li>
    14    <li><img src="http://img.mukewang.com/53ad25df0001300613660768.jpg" alt=""></li>
    15    <li><img src="http://img.mukewang.com/53ad26010001ac1113660768.jpg" alt=""></li>
    16    <li><img src="http://img.mukewang.com/53ad26170001a86013660768.jpg" alt=""></li>
    17    <li><img src="http://img.mukewang.com/53ad26320001289e13660768.jpg" alt=""></li>
    18    </ul>
    19   </div><!--img结束-->
    20   <div class="number">
    21        <a class="on"></a>
    22        <a></a>
    23        <a></a>
    24        <a></a>
    25        <a></a>
    26   </div>
    27 </div>
    28 <script>
    29    window.onload=function(){
    30        var img=document.getElementById("img");
    31        var number=document.getElementsByClassName("number")[0];
    32        var a=number.getElementsByTagName("a");
    33        for(i=0;i<a.length;i++){
    34            a[i].index=i;
    35             a[i].onmouseover=function(){
    36                 for(j=0;j<a.length;j++){
    37                     a[j].className="";}
    38                 a[this.index].className="on";
    39                 img.style.left=-this.index*800+"px";
    40                 }
    41             }
    42        }
    43 </script>
    44 </body>
    45 </html>
     1 @charset "utf-8";
     2 /* CSS Document */
     3 *{margin:0;padding:0;}
     4 
     5 body{font-size:14px;}
     6 
     7 img{border:none;}
     8 
     9 li{list-style:none;}
    10 
    11 input,select,textarea{outline:none;}
    12 
    13 textarea{resize:none;}
    14 
    15 a{text-decoration:none;}
    16 #focus{
    17     width:800px;
    18     height:450px;
    19     margin:100px auto;
    20     overflow:hidden;
    21     position:relative;}
    22 #img{
    23     width:4000px;
    24     position:absolute;
    25     left:0;
    26     top:0;
    27     }
    28 #img li{
    29     float:left;
    30     }
    31 #img li img{
    32     display:block;
    33     width:800px;
    34     height:100%;}
    35 .number{
    36     width:100%;
    37     text-align:center;
    38     position:absolute;
    39     left:0;
    40     bottom:20px;}
    41 .number a{
    42     width:30px;
    43     height:6px;
    44     background:#fff;
    45     /*这里a设置成inline-block格式,才出现了,为什么*/
    46     display:inline-block;}
    47 .number a.on{
    48     background:orange;}

    焦点图的制作,自己写的代码。另一篇是用了插件,自己写也蛮简单的,注意a要设置成inline-block样式。

  • 相关阅读:
    PowerDesigner导出SQL脚本
    【Android进阶学习】shape和selector的结合使用(转)
    国内最新安卓渠道列表42个(转)
    安卓新框架
    通知和消息有什么区别?(转)
    XSS之xssprotect(转)
    为你的Android App实现自签名的 SSL 证书(转)
    HTTPS和HTTP的区别(转)
    IT软件技术人员的职位路线(从程序员到技术总监)
    听大神说:https和http有何区别?(转)
  • 原文地址:https://www.cnblogs.com/sunmarvell/p/6830000.html
Copyright © 2011-2022 走看看