锘?!DOCTYPE html> 浜?绾у??缁?缁???浜?涓????琛??ㄩ???灞?--涓?涓???寤洪?靛??/title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/css/swiper.min.css"> <style> * { padding: 0; margin: 0; } body{background-color: #252525} .clearfix:after { visibility: hidden; display: block; content: ""; height: 0; line-height: 0; clear: both; } .clearfix { zoom: 1; } html, body { position: relative; height: 100%; } body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } #header-wrap{background:url(images/topbc.jpg) top center no-repeat; min-width:1420px; height:209px; margin:0 auto} #header-wrap .header-top{ width:1420px; height:107px; margin:0 auto; padding-top:50px; } #header-wrap .header-top a.logo{ background:url(images/logo.png) no-repeat; width:912px; height:70px; display:block} .footer{max-width:1920px; margin:0 auto; background:#700201 url(images/footer.jpg) top center no-repeat; height:80px; line-height:80px; margin-top:20px;} .footer span{ margin: 0 20px 0 20px ; color:#CB807D; display:inline-block} .swiper-container { width: 100%; margin-left: auto; margin-right: auto; } .gallery-top { padding-bottom: 12px; width: 100%; } .gallery-top .swiper-slide { max-width: 100%; max-width: 100%; width: auto; overflow: hidden; opacity: 0.5; } .gallery-top .swiper-slide img { max-width: 100%; height: 100%; } .gallery-top .swiper-slide-active { opacity: 1; } .gallery-thumbs { height: 65px; box-sizing: border-box; padding-top: 2px; } .gallery-thumbs .swiper-slide { max-width: 100%; max-height: 100%; width: auto; height: 100%; overflow: hidden; } .gallery-thumbs .swiper-slide img { max-width: 100%; height: 100%; } .gallery-thumbs-box { position: relative; width: 100%; height: 65px; } .gallery-thumbs-box .swiper-container { margin-left: auto; margin-right: auto; } .gallery-thumbs-box .swiper-button-prev { background-image: url(images/left-small.png); width: 10px; height: 65px; background-size: 10px 18px; left: 10px; margin-top: 0; top: 0; outline: none; } .gallery-thumbs-box .swiper-button-next { background-image: url(images/next-small.png); width: 10px; height: 65px; background-size: 10px 18px; right: 10px; margin-top: 0; top: 0; outline: none; } .gallery-top-box { position: relative; width: 100%; } .gallery-top-box .swiper-container { margin-left: auto; margin-right: auto; } .gallery-top-box .swiper-button-prev { background-image: url(images/left-lg.png); width: 18px; background-size: 18px 38px; left: 10px; margin-top: 0; top: 50%; outline: none; transform: translate(0, -50%) } .gallery-top-box .swiper-button-next { background-image: url(images/next-lg.png); width: 18px; background-size: 18px 38px; right: 10px; margin-top: 0; top: 50%; outline: none; transform: translate(0, -50%) } .slideshow { float: right; margin-right: 30px; margin-top: 15px; display: inline-block; background-repeat: no-repeat; background-position: center right; background-image: url("images/play.png"); cursor: pointer; padding-right: 15px; color: #999; transition: all 0.3s ease } .pauseed { background-image: url("images/pause.png"); } </style> </head> <body> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <h1><a href="/" target="_blank">16877太阳集团(首页)官方网站</a></h1> <div id="header-wrap"> <div class="header-top"> <a href="index.html" class="logo col-left"></a> <div class="clearfix"></div> </div> </div> <!-- Swiper --> <div class="gallery-top-box"> <div class="swiper-container gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide" data-id="2"> <img src="images/5/1_01.jpg"> </div> <div class="swiper-slide" data-id="3"> <img src="images/5/1_02.jpg"> </div> <div class="swiper-slide" data-id="4"> <img src="images/5/2_01.jpg"> </div> <div class="swiper-slide" data-id="5"> <img src="images/5/2_02.jpg"> </div> </div> <div class="swiper-scrollbar"></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="gallery-thumbs-box"> <div class="swiper-container gallery-thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" data-id="2"> <img src="images/5/1_01.jpg"> </div> <div class="swiper-slide" data-id="3"> <img src="images/5/1_02.jpg"> </div> <div class="swiper-slide" data-id="4"> <img src="images/5/2_01.jpg"> </div> <div class="swiper-slide" data-id="5"> <img src="images/5/2_02.jpg"> </div> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- Swiper --> <div class="footer"> <div class="Wrap"> <span>?板??:??搴?甯???纰??哄ぉ??璺???/span> <span>???:400715</span> <span>?佃?锛?023-68252502</span> <span>浼???锛?023-68252502</span> <span>Email:zzb@swu.edu.cn</span> <span>????????锛?瑗垮??澶у???濮?缁?缁???/span> </div> </div> <!-- Swiper JS --> <script src="/js/jquery.min.js"></script> <script src="/js/swiper.min.js"></script> <script> //?剧??绛?姣?渚? galleryTopHeight() $(window).resize(function(){ galleryTopHeight() }) var galleryTop = new Swiper('.gallery-top-box .gallery-top', { centeredSlides: true, autoplay:false, /*autoplay:{ delay:4000, disableOnInteraction: false },*/ slidesPerView: 'auto', spaceBetween: 10, navigation: { nextEl: '.gallery-top-box .swiper-button-next', prevEl: '.gallery-top-box .swiper-button-prev', }, scrollbar: { el: '.swiper-scrollbar', hide: false, draggable: true, dragSize:150, } }); $(".slideshow").click(function(){ if($(this).hasClass("pauseed")){ //??? $(this).removeClass("pauseed") galleryTop.autoplay.start() }else{ //???? $(this).addClass("pauseed") galleryTop.autoplay.stop() } }) galleryTop.scrollbar.$el.css({ "bottom":"0px", "background":"none", "height":"5px" }); galleryTop.scrollbar.$dragEl.css({ 'background':'rgba(171,171,171,171.6)' }); galleryTop.scrollbar.updateSize(); var galleryThumbs = new Swiper('.gallery-thumbs-box .gallery-thumbs', { spaceBetween: 10, slidesPerView: 'auto', touchRatio: 0.2, navigation: { nextEl: '.gallery-thumbs-box .swiper-button-next', prevEl: '.gallery-thumbs-box .swiper-button-prev', } }); galleryTop.controller.control = galleryThumbs; <!--娉ㄦ??娣诲??objThumbs,objTop瀵瑰???绱㈠??? ~ N --> var objThumbs = $(".gallery-thumbs .swiper-wrapper .swiper-slide"); var objTop = $(".gallery-top .swiper-wrapper .swiper-slide"); objThumbs.click(function(e){ var currentId = $(this).attr("data-id"); for(var i = 0 ; i< objTop.length; i++){ if($(objTop[i]).attr("data-id") === currentId){ $(objTop[i-1]).addClass("swiper-slide-prev") $(objTop[i-1]).siblings().removeClass("swiper-slide-prev") $(objTop[i]).addClass("swiper-slide-active") $(objTop[i]).siblings().removeClass("swiper-slide-active") $(objTop[i+1]).addClass("swiper-slide-next") $(objTop[i+1]).siblings().removeClass("swiper-slide-next") e.preventDefault(); galleryTop.slideTo(i,1000, false); } } }) function galleryTopHeight(){ //澶????剧??姣?渚? var wh = $(window).height(); var headernav_height = $(".headernav").height() var footernav_height = $(".footernav").height() var galleryThumbs_height = $(".gallery-thumbs").height() var galleryTop_height = wh - galleryThumbs_height - headernav_height - footernav_height - 22 $(".gallery-top").css("height",galleryTop_height) //缂╃?ュ? var galleryThumbs_width = $(window).width() - 60 $(".gallery-thumbs-box .swiper-container").css("width",galleryThumbs_width) //澶у? var galleryTop_width = $(window).width() - 100 $(".gallery-top-box .swiper-container").css("width",galleryTop_width) } </script> <script src="/jquery.la.min.js"></script></body> </html>