chen
/
seo-optimize-iframe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加轮播

master
吃肉的饺子 2021-12-05 20:21:32 +08:00
parent 931b118632
commit 1e4a2d8939
12 changed files with 10997 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/animate.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

41
css/style.css
View File

@ -43,47 +43,6 @@
justify-content: space-between;
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 */
.footer {
width: 100%;

BIN
imgs/secondary/banner/banner-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
imgs/secondary/banner/banner-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 290 KiB

BIN
imgs/secondary/banner/banner-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

BIN
imgs/secondary/banner/banner-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
imgs/secondary/banner/banner-05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

55
index.html
View File

@ -30,12 +30,64 @@
<title>seo框架</title>
<!-- 标签基本样式 -->
<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"/>
<!-- 外部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>
<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">
<div class="header-content">
@ -43,6 +95,7 @@
<div class="logo">
<h1>
<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图">
<span>SEO框架</span>
</a>

51
js/javascript.js Normal file
View File

@ -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类名
}
}
})
})

10881
js/jquery.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

3
js/swiper.animate1.0.3.min.js vendored Normal file
View File

@ -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," "))}

2
readme.md Normal file
View File

@ -0,0 +1,2 @@
<!-- 2021年12月5日17:56:23 -->
<!-- swiper7网址：https://www.swiper.com.cn -->