效果图:
需求分析:
- 页面打开的时候,每个li缓动到相应位置
- 鼠标移入slide,箭头显示
- 鼠标点击prev按钮,显示上一张
- 鼠标点击next按钮,显示下一张
源代码:
- HTML部分
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/1.webp" alt="" /></a></li>
<li><a href="#"><img src="images/2.webp" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/4.webp" alt="" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="prev"></a>
<a href="javascript:void(0);" class="next" id="next"></a>
</div>
</div>
</div>
- css部分
<style>
*{
margin:0;
padding:0
}
ol,ul{
list-style:none
}
a{
text-decoration:none
}
fieldset,img{
border:0;vertical-align:top;
}
a,input,button,select,textarea{
outline:none;
}
a,button{
cursor:pointer;
}
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
/* 为了兼容ie */
opacity:1;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
position: relative;
z-index:100;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(./images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(./images/next.png);
}
</style>
- JavaScript部分
- 为了简化代码,先封装一些常用的自定义构造函数
<script>
// 返回指定dom节点的attr样式值
function getStyle(dom, attr) {
if (window.getComputedStyle) {// 是否有getComputedStyle方法
//非IE低版
return window.getComputedStyle(dom, null)[attr];
} else {
//IE低版
return dom.currentStyle[attr];
}
}
// 多属性缓动
function animate(dom, json, callback) {
clearInterval(dom.timer)
// 要运动要定时器
dom.timer = setInterval(function () {
// 每20毫秒
var flag = true;
// json有几个属性,就要运动几次
for (var attr in json) {
// 1 获取当前位置
if (attr == "opacity") {
// 透明度在获取当前值的是要乘100
var current = parseInt(getStyle(dom, attr) * 100);
} else {
var current = parseInt(getStyle(dom, attr));
}
// 2 计算速度
var speed = json[attr] - current > 0 ? Math.ceil((json[attr] - current) / 10) : Math.floor((json[attr] - current) / 10)
// 3 计算下一个位置
if (attr == "zIndex") {
var next = json[attr];
} else {
var next = current + speed;
}
// 4 定位元素
if (attr == "zIndex") {
dom.style[attr] = next;
} else if (attr == "opacity") {
dom.style.opacity = next / 100;
dom.style.filter = "alpha(opacity=" + next + ")";
} else {
dom.style[attr] = next + "px";
}
// 判断是否到达目标
if (next != json[attr]) {
flag = false;
}
if (flag) {
clearInterval(dom.timer);
}
}
}, 20)
}
</script>
- js主体部分,需要用到封装的函数,调用即可
<script>
var json = [
{
"width": 400,
"top": 20,
"left": 50,
"opacity": 20,
"zIndex": 2
},
{
"width": 600,
"top": 70,
"left": 0,
"opacity": 80,
"zIndex": 3
},
{
"width": 800,
"top": 100,
"left": 200,
"opacity": 100,
"zIndex": 4
},
{
"width": 600,
"top": 70,
"left": 600,
"opacity": 80,
"zIndex": 3
},
{
"width": 400,
"top": 20,
"left": 750,
"opacity": 20,
"zIndex": 2
}
]
// 获取相关元素
var arrow = document.getElementById('arrow');//箭头所在容器
var prevBtn = document.getElementById('prev');//上一个按钮
var nextBtn = document.getElementById('next');//下一个按钮
var slideDiv = document.getElementById('slide');//容器
var liArr = slideDiv.children[0].children;//所有li集合
// 根据json显示li
function show() {
for (var i = 0; i < liArr.length; i++) {
animate(liArr[i], json[i])
}
}
// 1 页面打开的时候,每个li缓动到相应位置
show()
// 2 鼠标移入slide,箭头显示
slideDiv.onmouseenter = function(){
arrow.style.opacity = 1;//ie高版本
arrow.style.filter = "alpha(opacity=100)"//ie低版本
}
// 3 鼠标点击prev按钮,显示上一张
prevBtn.onclick = function () {
// 把json:j0 j1 j2 j3 j4
// 变成: j1 j2 j3 j4 j0
var obj = json.shift();
json.push(obj);
show();
}
// 4 鼠标点击next按钮,显示下一张
nextBtn.onclick = function () {
// 把json:j0 j1 j2 j3 j4
// 变成: j4 j0 j1 j2 j3
var obj = json.pop();
json.unshift(obj)
show();
}
</script>
- 总代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
ol,ul {
list-style: none
}
a {
text-decoration: none
}
fieldset,img {
border: 0;
vertical-align: top;
}
a,input,button,select,textarea {
outline: none;
}
a,button {
cursor: pointer;
}
.wrap {
width: 1200px;
margin: 100px auto;
}
.slide {
height: 500px;
position: relative;
}
.slide li {
position: absolute;
left: 200px;
top: 0;
/* 为了兼容ie */
opacity: 1;
}
.slide li img {
width: 100%;
}
.arrow {
opacity: 0;
position: relative;
z-index: 100;
}
.prev,.next {
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
background: url(./images/prev.png) no-repeat;
z-index: 99;
}
.next {
right: 0;
background-image: url(./images/next.png);
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/1.webp" alt="" /></a></li>
<li><a href="#"><img src="images/2.webp" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/4.webp" alt="" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="prev"></a>
<a href="javascript:void(0);" class="next" id="next"></a>
</div>
</div>
</div>
<script>
// 返回指定dom节点的attr样式值
function getStyle(dom, attr) {
if (window.getComputedStyle) {// 是否有getComputedStyle方法
//非IE低版
return window.getComputedStyle(dom, null)[attr];
} else {
//IE低版
return dom.currentStyle[attr];
}
}
// 多属性缓动
function animate(dom, json, callback) {
clearInterval(dom.timer)
// 要运动要定时器
dom.timer = setInterval(function () {
// 每20毫秒
var flag = true;
// json有几个属性,就要运动几次
for (var attr in json) {
// 1 获取当前位置
if (attr == "opacity") {
// 透明度在获取当前值的是要乘100
var current = parseInt(getStyle(dom, attr) * 100);
} else {
var current = parseInt(getStyle(dom, attr));
}
// 2 计算速度
var speed = json[attr] - current > 0 ? Math.ceil((json[attr] - current) / 10) : Math.floor((json[attr] - current) / 10)
// 3 计算下一个位置
if (attr == "zIndex") {
var next = json[attr];
} else {
var next = current + speed;
}
// 4 定位元素
if (attr == "zIndex") {
dom.style[attr] = next;
} else if (attr == "opacity") {
dom.style.opacity = next / 100;
dom.style.filter = "alpha(opacity=" + next + ")";
} else {
dom.style[attr] = next + "px";
}
// 判断是否到达目标
if (next != json[attr]) {
flag = false;
}
if (flag) {
clearInterval(dom.timer);
}
}
}, 20)
}
var json = [
{
"width": 400,
"top": 20,
"left": 50,
"opacity": 20,
"zIndex": 2
},
{
"width": 600,
"top": 70,
"left": 0,
"opacity": 80,
"zIndex": 3
},
{
"width": 800,
"top": 100,
"left": 200,
"opacity": 100,
"zIndex": 4
},
{
"width": 600,
"top": 70,
"left": 600,
"opacity": 80,
"zIndex": 3
},
{
"width": 400,
"top": 20,
"left": 750,
"opacity": 20,
"zIndex": 2
}
]
// 获取相关元素
var arrow = document.getElementById('arrow');//箭头所在容器
var prevBtn = document.getElementById('prev');//上一个按钮
var nextBtn = document.getElementById('next');//下一个按钮
var slideDiv = document.getElementById('slide');//容器
var liArr = slideDiv.children[0].children;//所有li集合
// 根据json显示li
function show() {
for (var i = 0; i < liArr.length; i++) {
animate(liArr[i], json[i])
}
}
// 1 页面打开的时候,每个li缓动到相应位置
show();
// 2 鼠标移入slide,箭头显示
slideDiv.onmouseenter = function () {
arrow.style.opacity = 1;//ie高版本
arrow.style.filter = "alpha(opacity=100)"//ie低版本
}
// 3 鼠标点击prev按钮,显示上一张
prevBtn.onclick = function () {
// 把json:j0 j1 j2 j3 j4
// 变成: j1 j2 j3 j4 j0
var obj = json.shift();
json.push(obj);
show();
}
// 4 鼠标点击next按钮,显示下一张
nextBtn.onclick = function () {
// 把json:j0 j1 j2 j3 j4
// 变成: j4 j0 j1 j2 j3
var obj = json.pop();
json.unshift(obj);
show();
}
</script>
</body>
</html>
所用图片:
由于你们没有图片,直接复制代码,展示不出效果,大家可以自己找几张图片来代替,稍微修改下即可,只要能看得懂代码,修改起来莫得问题啦