20160614 html5学习代码(图册)

Posted 唯一的liaoliao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了20160614 html5学习代码(图册)相关的知识,希望对你有一定的参考价值。

index.html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图册</title>
    <link rel="stylesheet" href="css/index.css">
     <script src="js/jquery.js"></script>
    <script src="js/SuperSlide.js"></script>
</head>
<body>   
        <ul class="pic">           
            <li> <img src="images/big1.jpg" ></li>
            <li><img src="images/big2.jpg" ></li>
            <li><img src="images/big3.jpg" ></li>
            <li> <img src="images/big4.jpg" ></li>
            <li> <img src="images/big5.jpg" ></li>
            <li> <img src="images/big6.jpg" ></li>
            <li> <img src="images/big7.jpg" ></li>
            <li> <img src="images/big8.jpg" ></li>
            <li> <img src="images/big9.jpg" ></li>
        </ul>  
        <div class="gray">
            <a href="javascript:;"><img src="images/big1.jpg" class="img"></a>
            <a href="javascript:;"><img src="images/slider-left.png" class="pre"></a>
             <a href="javascript:;"><img src="images/slider-right.png" class="next"></a>
         </div>   
   
   <script>
          var imgh=$(‘.gray .img‘).height();
          var h=imgh/2;       
          $(‘ .img‘).css(‘margin-top‘,-h+‘px‘);
          $(‘.gray‘).hide();    
        var index=0;
    
       $(‘.pic li img‘).click(function(e){
            e.stopPropagation();        
           $(‘.gray‘).show();       
          var s = $(this).attr(‘src‘);
          $(‘.gray .img‘).attr(‘src‘,s);
         var index=$(this).index()+1;
         
     })
     $(‘.gray‘).click(function(){
         $(‘.gray‘).hide();
     })
     $(‘.next‘).click(function(e){
         e.stopPropagation();
         index++;
         if(index>9){
             index=1;         }
         $(‘.gray .img‘).attr(‘src‘,‘images/big‘+index+‘.jpg‘);
     })
      $(‘.pre‘).click(function(e){
         e.stopPropagation();
         index--;
         if(index<1){
             index=9;         }
         $(‘.gray .img‘).attr(‘src‘,‘images/big‘+index+‘.jpg‘);
     })
     
   </script>
      <!--<script>
          jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
      </script>  -->
</body>
</html>

 

 

index.css部分

 

@charset "utf-8";
*{margin: 0;padding: 0};
html{
    height: 100%;
}
body{
    width: 100%;     
   
  }
 
  ul li{
     list-style: none;
  }
  .pic{      
      max-width: 1920px;
      width: 80%;
      margin: 0 auto;
  }
.pic li{
    width: 33.33333%;   
     display: block;
    float: left;       
}
.pic img{  
    width: 84%;
    padding:2%;
    margin: 4%;   
    box-shadow: 0.2vh 0.2vh 8vh rgb(152, 87, 133);
}

.gray{
    position: fixed;
    left: 0;
    top:0;/**/
    width: 0;
    width: 100%;
    height: 100%;  
    background-color: rgba(0,0,0,0.7);
 }
.img{
    position: absolute;
    width: 50%;    
    padding: 1%;
    background-color: #fff;
    left:25%;  
    top: 50%;     
}
.pre{
    position: absolute;
    width: 3%;
    left: 20%;  
    padding: 1%;
    background-color: #fff;
    top: 50%;
    box-sizing: border-box;
   
}
.next{
    position: absolute;
    width: 3%;
    left: 80%;
    padding: 1%;
    background-color: #fff;
    top: 50%;
    box-sizing: border-box;   
}


以上是关于20160614 html5学习代码(图册)的主要内容,如果未能解决你的问题,请参考以下文章

Alibaba限定发布最新Java并发编程图册(华山版),分享给备战的码农

HTML5代码学习文件操作

20160606 html5学习代码

20160607 html5学习代码

20160602 html5学习代码

20160608 html5学习代码