<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>制作简单的响应式幻灯片演示</title>
<style>
body { margin: 0; background-color: #fef8f9;}
h1 { margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center;}
.dowebok {
width: 700px;
margin: 0 auto;
}
.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;
}
}
</style>
</head>
<body>
<h1>制作简单的响应式幻灯片演示</h1>
<div class="dowebok">
<img class="active" src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
</div>
<nav class="slider-nav">
<ul>
<li class="arrow">
<a class="previous">
<span><</span>
</a>
</li>
<li class="arrow">
<a class="next">
<span>></span>
</a>
</li>
</ul>
</nav>
<script>
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);
</script>
</body>
</html>
基于jQuery制作简单的响应式幻灯片特效代码.zip
版权申诉
190 浏览量
2022-11-10
00:25:44
上传
评论
收藏 250KB ZIP 举报
基于jQuery制作简单的响应式幻灯片特效代码.zip （4个子文件） 
132677748094486172 likecs.com_132677748110971980 images 
2.jpg 93KB 1.jpg 61KB 3.jpg 95KB
index.html 3KB资源评论
毕业_设计
- 粉丝: 1936
- 资源: 1万+
