[代码样式]制作简单的响应式幻灯片

[代码样式]制作简单的响应式幻灯片

简介

本站介绍了很多 jQuery 幻灯片插件,它们都很优秀,且功能强大,应用在中大型页面上很合适。但如果你的页面很简单,只想要一个简单纯粹的幻灯片效果,这些插件可能略显臃肿。今天我们不用任何插件,写一个简单的响应式幻灯片。

浏览器兼容

[代码样式]制作简单的响应式幻灯片 [代码样式]制作简单的响应式幻灯片 [代码样式]制作简单的响应式幻灯片 [代码样式]制作简单的响应式幻灯片 [代码样式]制作简单的响应式幻灯片 [代码样式]制作简单的响应式幻灯片
IE10+ ✔ Edge ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

制作方法

1、HTML

<div class="dowebok">
<img class="active" src="https://www.dowebok.com/images/1.jpg">
<img src="https://www.dowebok.com/images/2.jpg">
<img src="https://www.dowebok.com/images/3.jpg">
</div>

以上是幻灯片主题代码,下面是导航代码:

<nav class="slider-nav">
<ul>
<li class="arrow">
<a class="previous">
<span>&lt;</span>
</a>
</li>
<li class="arrow">
<a class="next">
<span>&gt;</span>
</a>
</li>
</ul>
</nav>

2、CSS

.slider-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.slider-nav li {
-webkit-box-flex: 2;
flex: 2;
text-align: center;
display: -webkit-box;
display: flex;
}
img {
max-width: 100%;
display: none;
-webkit-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
-moz-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
}
img.active {
display: block;
-webkit-animation: fadeImg 0.8s;
-moz-animation: fadeImg 0.8s;
animation: fadeImg 0.8s;
}
.slider-nav {
margin-top: 20px;
}
.slider-nav .arrow {
flex: 0 0 15%;
}
.slider-nav a {
flex-basis: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.slider-nav span {
padding: 5px 10px;
font-size: 30px;
cursor: pointer;
}

再添加淡入淡出的动画效果:

@-webkit-keyframes fadeImg {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadeImg {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeImg {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

4、JavaScript

var items = document.querySelectorAll('img');
var itemCount = items.length;
var nextItem = document.querySelector('.next');
var previousItem = document.querySelector('.previous');
var count = 0;
function showNextItem() {
items[count].classList.remove('active');
if (count < itemCount - 1) {
count++;
} else {
count = 0;
}
items[count].classList.add('active');
console.log(count);
}
function showPreviousItem() {
items[count].classList.remove('active'); if (count > 0) {
count--;
} else {
count = itemCount - 1;
}
items[count].classList.add('active');
console.log(count);
}
nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);

到这里就制作完了,看看效果吧。

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]直播平台主播列表效果

2020-8-24 10:16:29

脚本代码

[代码样式]微信读书页面源码

2020-8-24 10:16:31

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索