zhoujian
5 years ago
@ -1,37 +0,0 @@
|
||||
*{margin: 0; padding: 0;}
|
||||
body{
|
||||
font-family: "microsoft yahei";
|
||||
font-size: 14px;
|
||||
background-color: #1F1F1F;
|
||||
}
|
||||
li{list-style: none;}
|
||||
a{ text-decoration: none;}
|
||||
img{ width: 100%;}
|
||||
#boxhdp{ width: 600px; height: 300px;margin: 0 auto; margin-top: 30px; overflow: hidden; position: relative;}
|
||||
#img>li{ width: 100%; height: 100%; float: left; text-align: center; display: none;}
|
||||
#img>.current{display: block;}
|
||||
#li{position: absolute;
|
||||
left: 50%;
|
||||
bottom: 15px;
|
||||
margin-left: -35px;}
|
||||
#li>li{ width: 10px;height: 10px; background-color: #ccc; border-radius: 50%; margin-right: 5px; float: left; cursor: pointer;}
|
||||
#li>.on{ background-color: #f50;}
|
||||
#an{ display: none;}
|
||||
#an a{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(0,0,0,.3);
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
font-family: "宋体";
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
#an a:hover{
|
||||
background-color: rgba(0,0,0,.8);
|
||||
}
|
||||
#an .an-a2{ right: 0;}
|
||||
@ -0,0 +1,6 @@
|
||||
|
||||
.swiper-item > img{
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
object-fit: cover;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
/**
|
||||
* @desc 无缝轮播
|
||||
* @author: Demigodliu
|
||||
* @date: 2020/06/27 15:16
|
||||
**/
|
||||
*{-webkit-tap-highlight-color:rgba(0,0,0,0);transform:translateZ(0)}html,body{margin:0;padding:0}.swiper-container{position:relative;width:800px;min-width:300px;height:300px;min-height:120px;overflow:hidden}.swiper-wrapper{position:absolute;left:0;height:100%}.swiper-wrapper-transition{transition:all .8s ease 0s}.swiper-item{display:inline-block;width:100%;height:100%;float:left}.swiper-btn-group{position:absolute;left:0;top:0;display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.swiper-btn-group_prev,.swiper-btn-group_next{position:relative;width:50px;height:50px;margin:10px;border-radius:50%;transition:background-color .2s;cursor:pointer}.swiper-btn-group_prev:hover,.swiper-btn-group_next:hover{background-color:rgba(255,255,255,.1)}.swiper-btn-group_prev::before,.swiper-btn-group_next::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-30%,-50%) rotate(45deg);width:15px;height:15px;border-color:#fff;border-style:solid}.swiper-btn-group_prev::before{border-width:0 0 2px 2px}.swiper-btn-group_next::before{border-width:2px 2px 0 0;transform:translate(-70%,-50%) rotate(45deg)}.swiper-pagination{position:absolute;left:0;bottom:5px;display:flex;justify-content:center;align-items:center;width:100%;height:20px}.swiper-pagination-item{width:10px;height:10px;border-radius:50%;background-color:rgba(255,255,255,0.45);transition:all .3s}.swiper-pagination-item:not(:last-child){margin-right:10px}.swiper-pagination-item_active{width:30px;border-radius:5px;background-color:rgba(255,255,255,0.85)}
|
||||
@ -0,0 +1,6 @@
|
||||
/**
|
||||
* @desc 无缝轮播
|
||||
* @author: Demigodliu
|
||||
* @date: 2020/06/27 15:15
|
||||
**/
|
||||
"use strict";(function(){$.fn.extend({carousel:function a(d){var c=this;d=$.extend($.fn.carousel.defaults,d);d.width=+d.width;d.height=+d.height;d.speed=+d.speed;d.needPrevAndNextBtnGroup=!!d.needPrevAndNextBtnGroup;d.needPagination=!!d.needPagination;var h=d,k=h.width,f=h.height,r=h.speed,j=h.needPrevAndNextBtnGroup,v=h.needPagination;c.css({width:k,height:f});c.find(".swiper-item").css({width:k});var e=null;var m=false;var o={init:function q(){this.cloneItem();this.initBoxAndItem();this.initButtonGroup();this.initPagination()},cloneItem:function s(){var w=c.find(".swiper-item:not(:first-child)").clone().addClass("cloned");var x=c.find(".swiper-item:not(:last-child)").clone().addClass("cloned");c.find(".swiper-wrapper").prepend(w).append(x)},initBoxAndItem:function t(){var z=this;var x=$(".swiper-item");x.not(".cloned").eq(0).addClass("active");var w=$(".active").index();var y=x.length;c.find(".swiper-wrapper").css({"width":y*k,"transform":"translate3d(".concat(-parseInt(w)*k,"px, 0, 0)")});setTimeout(function(){z.transitionToggle(true)},100);o.autoPlay()},initButtonGroup:function u(){if(j){$(".swiper-container").append('\n <div class="swiper-btn-group">\n <div class="swiper-btn-group_prev"></div>\n <div class="swiper-btn-group_next"></div>\n </div>\n ');$(".swiper-btn-group_prev").unbind("click").bind("click",this.prev);$(".swiper-btn-group_next").unbind("click").bind("click",this.next)}},prev:function g(){clearTimeout(m);m=setTimeout(function(){clearInterval(e);var A=o,F=c.find(".swiper-item"),B=F.length,x=c.find(".active"),y=x.index(),E=c.find(".swiper-wrapper"),z=$(".swiper-pagination-item"),D=$(".swiper-pagination-item_active"),w=D.index();var C=(B+2)/3;if(y!==1){x.removeClass("active").prev().addClass("active");E.css("transform","translate3d(-".concat(k*--y,"px, 0px, 0px)"))}else{A.transitionToggle(false);x.removeClass("active");F.not(".cloned").eq(2).addClass("active");var G=c.find(".active").index();E.css("transform","translate3d(-".concat(k*G,"px, 0px, 0px)"));setTimeout(function(){A.transitionToggle(true);A.prev()},100);return false}if(!w){z.removeClass("swiper-pagination-item_active").eq(C-1).addClass("swiper-pagination-item_active")}else{D.removeClass("swiper-pagination-item_active").prev().addClass("swiper-pagination-item_active")}A.autoPlay()},100)},next:function i(){clearTimeout(m);m=setTimeout(function(){clearInterval(e);var A=o,F=c.find(".swiper-item"),B=F.length,x=c.find(".active"),y=x.index(),E=c.find(".swiper-wrapper"),z=$(".swiper-pagination-item"),D=$(".swiper-pagination-item_active"),w=D.index();var C=(B+2)/3;if(y!==B-2){x.removeClass("active").next().addClass("active");E.css("transform","translate3d(-".concat(k*++y,"px, 0px, 0px)"))}else{A.transitionToggle(false);x.removeClass("active");F.not(".cloned").eq(C-3).addClass("active");var G=c.find(".active").index();E.css("transform","translate3d(-".concat(k*G,"px, 0px, 0px)"));setTimeout(function(){A.transitionToggle(true);A.next()},100);return false}if(w!==C-1){D.removeClass("swiper-pagination-item_active").next().addClass("swiper-pagination-item_active")}else{z.removeClass("swiper-pagination-item_active").eq(0).addClass("swiper-pagination-item_active")}A.autoPlay()},100)},initPagination:function b(){if(v){$(".swiper-container").append('<div class="swiper-pagination"></div>');var y=$(".swiper-item").not(".cloned").length;var x="";for(var w=0;w<y;w++){x+='<div class="swiper-pagination-item"></div>'}$(".swiper-pagination").html(x).find(".swiper-pagination-item").eq(0).addClass("swiper-pagination-item_active")}},transitionToggle:function l(w){if(w){c.find(".swiper-wrapper").addClass("swiper-wrapper-transition")}else{c.find(".swiper-wrapper").removeClass("swiper-wrapper-transition")}},autoPlay:function p(){e=setInterval(function(){o.next()},r)},handleSlide:function n(){var B=c.find(".swiper-wrapper");var x=window.navigator.appVersion;var z=0;var A=0;var w=false;var y=0;if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(x)){}else{c.unbind("mousedown").bind("mousedown",function(D){var C=D.clientX;z=C;y=B.css("transform");y=-y.split("-")[1].split(",")[0];w=true}).unbind("mousemove").bind("mousemove",function(F){var D=F.clientX;if(w){clearInterval(e);o.transitionToggle(false);var E=D-z;A=Math.abs(E);var C=y+E;B.css("transform","translate3d(".concat(C,"px, 0px, 0px)"));if(Math.abs(E)>=150){w=false;o.transitionToggle(true);if(E>0){o.prev()}else{o.next()}}}}).unbind("mouseup").bind("mouseup",function(D){var C=D.clientX;w=false;if(A<150){o.transitionToggle(true);B.css("transform","translate3d(".concat(y,"px, 0px, 0px)"));setTimeout(function(){o.autoPlay()},300)}})}}};o.init()}});$.fn.carousel.defaults={width:800,height:300,speed:3000,needPrevAndNextBtnGroup:true,needPagination:true}})();
|
||||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 139 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 164 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 169 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 101 KiB |