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>

  • 相关阅读:
    SpringBoot入门(一)——开箱即用
    四六级成绩查询,你的『验证码』刷出来了吗?
    Kubernetes 在网易云中的落地优化实践
    漫画:深入浅出 ES 模块
    两分钟了解Docker的优势
    浅析Kubernetes的工作原理
    常用数据清洗方法大盘点
    移动端推广APP防作弊机制之依我见
    十一、观察者模式(Observable、Observer)
    paip.最新的c++ qt5.1.1环境搭建跟hello world
  • 原文地址:https://www.cnblogs.com/yangwenbo/p/9598319.html
Copyright © 2011-2022 走看看