html5 图册

最新推荐文章于 2021-08-04 00:50:09 发布

weixin_30596023

最新推荐文章于 2021-08-04 00:50:09 发布

阅读量292

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liaoliao985786516/p/5589221.html

版权

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" alt=""></li>
            <li><img src="images/big2.jpg" alt=""></li>
            <li><img src="images/big3.jpg" alt=""></li>
            <li> <img src="images/big4.jpg" alt=""></li>
            <li> <img src="images/big5.jpg" alt=""></li>
            <li> <img src="images/big6.jpg" alt=""></li>
            <li> <img src="images/big7.jpg" alt=""></li>
            <li> <img src="images/big8.jpg" alt=""></li>
            <li> <img src="images/big9.jpg" alt=""></li>
        </ul>
        <div class="gray">
            <a href="javascript:;"><img src="images/big1.jpg" alt="" class="img"></a>
            <a href="javascript:;"><img src="images/slider-left.png" alt="" class="pre"></a>
             <a href="javascript:;"><img src="images/slider-right.png" alt="" 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>
      
</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;
}

转载于:https://www.cnblogs.com/liaoliao985786516/p/5589221.html

weixin_30596023

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 图册

index.html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图册</title> <link rel="stylesheet" href="css/index.css"> <scr...
复制链接

扫一扫