zoukankan      html  css  js  c++  java
  • 图片放大 循环显示

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    .c-container{

    }
    .c-container ul{
    font-size: 0;
    }
    .c-container ul li{
    200px;
    height: 190px;
    border: 2px solid transparent;
    display: inline-block;
    cursor: pointer;
    }
    .c-container ul li img{
    100%;
    height: 100%;
    }
    .m-mask-container{
    position: fixed;
    left: 0;
    top: 0;
    100%;
    height: 100%;
    display: none;

    }
    .m-mask{
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);

    }

    .b-banner{
    position: fixed;
    500px;
    height: 400px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    z-index: 3;
    margin-left: -250px;
    margin-top: -200px;
    }
    .b-banner img{
    100%;
    height: 100%;
    }
    .btn-close{
    position: absolute;
    top: -16px;
    right: -16px;
    height: 25px;
    25px;
    line-height: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    text-align: center;
    font-size: 16px;
    z-index: 5;
    color: #fff;
    background-color: #cfcfcf;
    cursor: pointer;
    }
    .btn{
    text-align: center;
    cursor: pointer;
    display:block;
    background-color: #fff;
    }
    </style>
    </head>
    <body>
    <div class="c-container">
    <ul id="imgBox">
    <li><img onclick="bigPicture(this)" src="img/01.jpg" alt=""></li>
    <li><img onclick="bigPicture(this)" src="img/2.jpg" alt=""></li>
    <li><img onclick="bigPicture(this)" src="img/3.jpg" alt=""></li>
    <li><img onclick="bigPicture(this)" src="img/4.jpg" alt=""></li>
    <li><img onclick="bigPicture(this)" src="img/5.jpg" alt=""></li>
    <li><img onclick="bigPicture(this)" src="img/6.JPG" alt=""></li>
    <li><img onclick="bigPicture(this)" src="img/7.JPG" alt=""></li>
    </ul>
    </div>
    <div class="m-mask-container">
    <div class="m-mask"></div>
    <div class="b-banner">
    <a class="btn" onclick="prevBtn()">上一个</a>
    <img alt="">
    <a class="btn" onclick="nextBtn()">下一个</a>
    <i class="btn-close" onclick="closeBtn('.m-mask-container')">X</i>
    </div>

    </div>
    <script src="script/jquery-1.11.3.js"></script>
    <script>
    var srcArr = [],index;

    for (var i = 0;i<$("#imgBox li").length;i++){
    srcArr.push($("#imgBox li").eq(i).children().attr("src"));
    }
    function bigPicture(self) {
    var $src = $(self).attr("src");
    $(".m-mask-container").show();
    $(".b-banner img").attr('src',$src);
    index = $(self).parents().index();

    }
    //关闭
    function closeBtn(obj) {
    console.log(srcArr[index]);
    $(obj).hide();
    }
    //上一张
    function prevBtn() {
    index--;
    if(index<0){
    index = srcArr.length-1;
    }
    var $s = srcArr[index];
    $(".b-banner img").attr('src',$s);
    }
    //上一张
    function nextBtn() {
    index++;
    if(index>srcArr.length-1){
    index = 0;
    }
    var $s = srcArr[index];
    $(".b-banner img").attr('src',$s);
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    sun.misc.BASE64Encoder找不到jar包的解决方法
    mybatis中的#和$的区别
    mysql , oracle 从记录中查询出 楼盘下只有 no 公司的 楼盘
    Windows+Git+TortoiseGit+COPSSH 安装 教程
    oracle job 定时执行 存储过程
    如何在PL/SQL中修改ORACLE的字段顺序
    oracle创建数据库连接dblink
    oracle数据库去掉重复记录;只保留一条数据
    Oracle中like查询下划线等特殊字符的处理
    START WITH CONNECT BY PRIOR子句实现递归查询
  • 原文地址:https://www.cnblogs.com/yangwenbo/p/9598319.html
Copyright © 2011-2022 走看看