添加轮播
parent
931b118632
commit
1e4a2d8939
File diff suppressed because one or more lines are too long
|
|
@ -43,47 +43,6 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.nav-box {
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
}
|
|
||||||
/* 下滑线 */
|
|
||||||
.nav-box .line {
|
|
||||||
height: 2px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
background: #FF1847;
|
|
||||||
}
|
|
||||||
.nav-box ul {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.nav-box ul li {
|
|
||||||
margin: 0 40px 0 0;
|
|
||||||
opacity: 0.4;
|
|
||||||
transition: all 0.4s ease;
|
|
||||||
}
|
|
||||||
/* 鼠标悬浮 */
|
|
||||||
.nav-box ul li:hover {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
/* 当前选中 */
|
|
||||||
.nav-box ul li.active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
/* 最后一个li */
|
|
||||||
/* .nav-box ul li:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
} */
|
|
||||||
.nav-box ul li a {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 0.2em;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
/* 导航 end */
|
/* 导航 end */
|
||||||
.footer {
|
.footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
55
index.html
55
index.html
|
|
@ -30,12 +30,64 @@
|
||||||
<title>seo框架</title>
|
<title>seo框架</title>
|
||||||
<!-- 标签基本样式 -->
|
<!-- 标签基本样式 -->
|
||||||
<link rel="stylesheet" type="text/css" href="./css/base.css"/>
|
<link rel="stylesheet" type="text/css" href="./css/base.css"/>
|
||||||
|
<!-- swiper轮播 -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/swiper.min.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/animate.min.css"/>
|
||||||
<!-- 自定义样式 -->
|
<!-- 自定义样式 -->
|
||||||
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
|
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
|
||||||
<!-- 外部js -->
|
<!-- 外部js -->
|
||||||
<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<!-- <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script> -->
|
||||||
|
<script src="./js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script src="./js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<!-- 自定义js -->
|
||||||
|
<script src="./js/javascript.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
// 更新js文件版本，达到清除js带来的缓存
|
||||||
|
var scripts = document.getElementsByTagName("script");
|
||||||
|
for(var i = 0;i < scripts.length; i++){
|
||||||
|
if(scripts[i].src){
|
||||||
|
scripts[i].src = scripts[i].src+"?t="+new Date().getTime();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 更新css文件版本，达到清除css带来的缓存
|
||||||
|
var csss = document.getElementsByTagName("link");
|
||||||
|
for(var i = 0;i < csss.length; i++){
|
||||||
|
if(csss[i].href){
|
||||||
|
csss[i].href = csss[i].href+"?t="+new Date().getTime();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- banner轮播图 -->
|
||||||
|
<div class="banner-swiper swiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="imgs/secondary/banner/banner-01.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||||
|
<h1 class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-01</h1>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="imgs/secondary/banner/banner-02.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||||
|
<h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-02</h1>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="imgs/secondary/banner/banner-03.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||||
|
<h1 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-03</h1>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="imgs/secondary/banner/banner-04.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||||
|
<h1 class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-04</h1>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="imgs/secondary/banner/banner-05.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||||
|
<h1 class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-05</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--分页器。如果放置在swiper外面，需要自定义样式。-->
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
<!-- 头部导航 -->
|
<!-- 头部导航 -->
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
|
|
@ -43,6 +95,7 @@
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<h1>
|
<h1>
|
||||||
<a href="index.html" title="seo框架">
|
<a href="index.html" title="seo框架">
|
||||||
|
<!-- 图片渲染失败，显示默认图片 onerror="this.src='./imgs/public/小桶龙.png'" -->
|
||||||
<img src="123" height="70" style="margin-right: 6px;" onerror="this.src='./imgs/public/小桶龙.png'" alt="logo图">
|
<img src="123" height="70" style="margin-right: 6px;" onerror="this.src='./imgs/public/小桶龙.png'" alt="logo图">
|
||||||
<span>SEO框架</span>
|
<span>SEO框架</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
jQuery(function($){
|
||||||
|
// banner轮播
|
||||||
|
var bannerSwiper = new Swiper('.banner-swiper',{
|
||||||
|
loop:true,//开启循环播放
|
||||||
|
autoplay: {//开启自动播放
|
||||||
|
delay:3000,
|
||||||
|
disableOnInteraction: false,//触摸后不会停止自动滚动
|
||||||
|
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
|
||||||
|
},
|
||||||
|
pagination: {//分页器
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
type: 'bullets',//指示点样式 bullets：圆点（默认）、fraction：分式、progressbar：进度条、custom：自定义
|
||||||
|
progressbarOpposite: false,//水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
|
||||||
|
dynamicBullets: false,//当slide很多时，分页器小点的数量会部分隐藏。针对bullets
|
||||||
|
dynamicMainBullets: 2,//主展示的数量
|
||||||
|
hideOnClick :true,//点击时隐藏分页器
|
||||||
|
clickable :true,//点击分页器的指示点控制Swiper切换
|
||||||
|
// bulletClass : 'my-bullet',//需设置.my-bullet样式
|
||||||
|
// bulletActiveClass: 'my-bullet-active',//当前活动块的指示小点的类名。需设置.my-bullet-active样式
|
||||||
|
renderBullet: function (index, className) {
|
||||||
|
switch(index){
|
||||||
|
case 0:text='壹';break;
|
||||||
|
case 1:text='贰';break;
|
||||||
|
case 2:text='叁';break;
|
||||||
|
case 3:text='肆';break;
|
||||||
|
case 4:text='伍';break;
|
||||||
|
case 5:text='六';break;
|
||||||
|
case 6:text='柒';break;
|
||||||
|
case 7:text='捌';break;
|
||||||
|
case 8:text='玖';break;
|
||||||
|
case 9:text='拾';break;
|
||||||
|
}
|
||||||
|
return '<span class="' + className + '">' + text + '</span>';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
effect : 'fade',//轮播的动效 默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
|
||||||
|
fadeEffect: {
|
||||||
|
crossFade: true,
|
||||||
|
},
|
||||||
|
on:{
|
||||||
|
init: function(){
|
||||||
|
swiperAnimateCache(this); //隐藏动画元素
|
||||||
|
swiperAnimate(this); //初始化完成开始动画
|
||||||
|
},
|
||||||
|
slideChangeTransitionEnd: function(){
|
||||||
|
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
|
||||||
|
// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,3 @@
|
||||||
|
//本插件由www.swiper.com.cn提供
|
||||||
|
//版本1.03
|
||||||
|
function swiperAnimateCache(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["style"]?allBoxes[i].setAttribute("swiper-animate-style-cache",allBoxes[i].attributes["style"].value):allBoxes[i].setAttribute("swiper-animate-style-cache"," "),allBoxes[i].style.visibility="hidden"}function swiperAnimate(a){clearSwiperAnimate(a);var b=a.slides[a.activeIndex].querySelectorAll(".ani");for(i=0;i<b.length;i++)b[i].style.visibility="visible",effect=b[i].attributes["swiper-animate-effect"]?b[i].attributes["swiper-animate-effect"].value:"",b[i].className=b[i].className+" "+effect+" "+"animated",style=b[i].attributes["style"].value,duration=b[i].attributes["swiper-animate-duration"]?b[i].attributes["swiper-animate-duration"].value:"",duration&&(style=style+"animation-duration:"+duration+";-webkit-animation-duration:"+duration+";"),delay=b[i].attributes["swiper-animate-delay"]?b[i].attributes["swiper-animate-delay"].value:"",delay&&(style=style+"animation-delay:"+delay+";-webkit-animation-delay:"+delay+";"),b[i].setAttribute("style",style)}function clearSwiperAnimate(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["swiper-animate-style-cache"]&&allBoxes[i].setAttribute("style",allBoxes[i].attributes["swiper-animate-style-cache"].value),allBoxes[i].style.visibility="hidden",allBoxes[i].className=allBoxes[i].className.replace("animated"," "),allBoxes[i].attributes["swiper-animate-effect"]&&(effect=allBoxes[i].attributes["swiper-animate-effect"].value,allBoxes[i].className=allBoxes[i].className.replace(effect," "))}
|
||||||
Loading…
Reference in New Issue