附上代码（其实脑瓜子疼）
/**
* 淡入
* @param element 待添加淡入动画效果的 DOM 元素对象
* @param speed 限定运动的总时间
* @param fn 在运动结束后需要继续执行的函数
*/
function fadeIn(element, speed, fn) {
element.style.display = "block";
element.style.opacity = 0;
animate(element, {opacity: 1}, speed, fn);
}
/**
* 淡出
* @param element 待添加淡出动画效果的 DOM 元素对象
* @param speed 限定运动的总时间
* @param fn 在运动结束后需要继续执行的函数
*/
function fadeOut(element, speed, fn) {
element.style.display = "block";
element.style.opacity = 1;
animate(element, {opacity: 0}, speed, function() {
element.style.display = "none";
fn && fn();
});
}
<!--
淡入淡出轮播的原理：
将所有元素全都重叠在一起，并让第一张显示，其他图片隐藏
当切换图片显示的时候，因为所有的img Dom元素可以选择得到
所以，就可以使用元素节点列表操作元素，使得图片一张接一张
的显示，经过js改变元素的opacity来改变元素的显示
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
</head>
<style>
*{
margin: 0 ;
padding: 0 ;
}
.container{
width: 658px;
height: 658px;
border: 1px solid ;
margin: 50px auto;
position: relative;
}
/* 给父元素container设置定位，让子元素停靠 */
ul{
position: relative;
}
li{
list-style: none;
}
ul li{
position: absolute;
display: none;
}
ol{
position: absolute;
height: 20px;
width: 658px;
background: rgba(0, 0, 0, 0.5);
bottom:0px;
}
ol li{
float: left;
margin: 0 10px;
cursor: pointer;
}
.show{
color: #ad4;
}
.container .btn .next,
.container .btn .prev{
position: absolute;
z-index: 9;
background: rgba(54, 32, 15, 0.5);
width: 45px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 30px;
cursor: pointer;
}
.container .btn .next{
right: 0px;
}
</style>
<body>
<div class="container">
<ul>
<li style="display:block;"><a href="#"><img src="images/11.jpg" alt="11"></a></li>
<li><a href="#"><img src="images/12.jpg" alt="12"></a></li>
<li><a href="#"><img src="images/13.jpg" alt="13"></a></li>
<li><a href="#"><img src="images/14.jpg" alt="14"></a></li>
</ul>
<ol>
<li class="show"><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ol>
<div class="btn">
<span class="next">></span>
<span class="prev"><</span>
</div>
</div>
<script src="tools.js"></script>
<script>
//让图片自动切换起来
//首先要获取所有图片
var lis = document.querySelectorAll("ul li");//获取到所有图片li标签
var ol_lis = document.querySelectorAll("ol li");//获取所有星星li标签
// console.log(lis);
var len = lis.length;//获得li的数量；
var currindex = 0;//状态量。表示当前li
var nextindex = 1;//状态量。表示下一个li
function play_animate(){
fadeOut(lis[currindex],400);//淡出函数
fadeIn(lis[nextindex],400);//淡入函数
ol_lis[currindex].className = "";//移除对应图片的star的颜色
ol_lis[nextindex].className = "show";//给下一个对应图片的star添加color
currindex = nextindex;//将下一个赋值给当前
nextindex++;//得到更下一个
if(nextindex > len - 1){//如果元素越界，设置为0
nextindex = 0;
}
}
var timer = setInterval(play_animate,1000);//设置定时器
var container = document.querySelector(".container");//获取大盒子
container.onmouseenter = function (){//鼠标移入大盒子清除定时器
clearInterval(timer);
}
container.onmouseleave = function(){//鼠标移出大盒子添加定时器
timer = setInterval(play_animate,1000);
}
var ol = document.querySelector("ol");//获取ol
var i_s = document.querySelectorAll("ol li i");//获取ol里面的i标签
// console.log(ol);
ol.onclick = function(event){//以事件委托的方式得到鼠标点击的i标签
event = event||window.event;//兼容ie做法
var source = event.target;//得到事件源
if(source.nodeName === "I"){//判断事件源是不是i
// console.log(source);
// console.log(ol_lis);
var index = Array.from(i_s).indexOf(source);//找到事件源的下标
if(currindex === index ) return;//如果事件源的下标与标签的下标一样，表示当前下标对应当前图片，则不执行
nextindex = index;//如果不相等，则，将事件源的下标赋值给 图片下标，即改变分、当前图片下标，让其显示
play_animate();//调用动画函数来显示图片
}
}
var next_ = document.querySelector(".btn .next");
var prev_ = document.querySelector(".btn .prev");//获取prev和next按钮
next_.onclick = function(){//next按钮按下，表明图片显示下一张，这与play_animate一样，点击则立即执行该函数
play_animate();
}
prev_.onclick = function(){//prev按钮按下，表明图片显示上一张，而play_animate是显示下一张，所以这里要改变传入到fedain中的元素，这就需要他的序号减一
nextindex = currindex - 1;//将当前图片序号减一赋给本来的下一张，达到改变序号的目的
if(nextindex<0){//如果图片的序号已经小于0，那么就越出了边界，所以要判断一下
nextindex = len -1;//条件成立，就让下一张的序号变为最后一张
}
play_animate();//调用函数
}
next_.onselectstart = function(event){
event.preventDefault();//消除鼠标点击>选中变蓝的问题
}
prev_.onselectstart = function(event){
event.preventDefault();//消除鼠标点击<选中变蓝的问题
}
</script>
</body>
</html>
网友评论