html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui"> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"> <style> .showBigImg { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 999; } .showBigImg .closeBigImg { position: absolute; right: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: #000; text-align: center; line-height: 45px; font-size: 45px; color: #fff; z-index: 9999; user-select: none; } .showBigImg .showBigImgWrap { position: relative; width: 100%; height: 100%; overflow: hidden; } .showBigImg .showBigImgWrap .allImgBox { position: relative; width: 100%; height: 100%; } .showBigImg .showBigImgWrap .allImgBox .imgIte { float: left; width: 100%; height: 100%; text-align: center; } .showBigImg .showBigImgWrap .allImgBox .imgIte span { display: inline-block; width: 0; height: 100%; vertical-align: middle; } .showBigImg .showBigImgWrap .allImgBox .imgIte img { max-width: 90%; max-height: 90%; vertical-align: middle; } .small-img img{ width: 150px; } </style> </head> <body> <div class="small-img"> <img src="http://h.hiphotos.baidu.com/image/pic/item/71cf3bc79f3df8dcb66ef58ac111728b4710285d.jpg" alt=""> <img src="http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd09ccfb7903b30f2442a70fa9.jpg" alt=""> <img src="http://h.hiphotos.baidu.com/image/pic/item/71cf3bc79f3df8dcb66ef58ac111728b4710285d.jpg" alt=""> <img src="http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd09ccfb7903b30f2442a70fa9.jpg" alt=""> </div> <div class="showBigImg"> <div class="closeBigImg"> × </div> <div class="showBigImgWrap swiper-container"> <div class="allImgBox swiper-wrapper"> <div class="imgIte swiper-slide"> <span></span><img src="img/slide1.png" alt=""> </div> </div> <div class="swiper-pagination"></div> <a href="javascript:;" class="swiper-button-prev"></a> <a href="javascript:;" class="swiper-button-next"></a> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script> <script> var myswiper = new Swiper('.showBigImgWrap',{ pagination : '.swiper-pagination', prevButton:'.swiper-button-prev', nextButton:'.swiper-button-next' }); var outwrap = $('.showBigImg'); var close = $('.closeBigImg'); var box = $('.allImgBox'); close.click(function () { outwrap.fadeOut(); }); //BigImg代码生成 function BigImgSlide(srcArr,posi){ outwrap.fadeIn(); var str = ''; for(var i=0; i<srcArr.length; i++){ str += '<div class="imgIte swiper-slide"><span></span><img src="'+ srcArr[i]+'" alt=""></div>'; } box.html(str); var imgIte = $('.imgIte'); imgIte.css({ width: window.innerWidth, height: window.innerHeight }); myswiper.update(); myswiper.slideTo(posi, 0); } //图片点击 $(function () { var img = $('.small-img img'); img.click(function () { var arr = []; img.each(function () { arr.push($(this).attr('src')); }); BigImgSlide(arr, img.index(this)); }); }); </script> </body> </html>
评论 (4 )
最新评论
是下面的小点点吗,加上了
挺不错的,要是能完善下图片分页数量那就更完美了
666很不错
很333*2