1、最近突然要做一个轮播图，原来做的一个demo轮播图不怎么适合：
$(".apl_home_layered ul li").eq(index).fadeIn(500).siblings().hide();
2、然后，自己就凑合的写了一个（记得引入图片路径）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>轮播图</title>
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- css 样式-->
<style type="text/css">
ul,li,img{border:0px;list-style-type: none;}
.apl_home_img_first{width: 800px; height: 600px;}
.home_slideshow{position:relative;}
.apl_home_layered ul li{display:none;}
.home_hoves{position:absolute;bottom:0;left:50%;transform: translate(-50%,0);}
.home_hover{cursor:pointer;position:relative;display:inline-block;width:12px;height:12px;margin:12px;border-radius:8px;background:#227FF;opacity:0.7;}
</style>
</head>
<body>
<div class="apl_home_layered home_slideshow">
<ul>
<li style="display:block;"><a href="#"><img id="home_first_img" src="images/spring.jpg" class="apl_home_img_first" alt="1"/></a></li>
<li><a href="#"><img id="home_first_img" src="images/summer.jpg" class="apl_home_img_first" alt="2" /></a></li>
<li><a href="#"><img id="home_first_img2" src="images/autumn.jpg" class="apl_home_img_first" alt="3" /></a></li>
<li><a href="#"><img id="home_first_img3" src="images/winter.jpg" class="apl_home_img_first" alt="4" /></a></li>
</ul>
<p class="home_hoves" >
<span class="home_hover"></span>
<span class="home_hover"></span>
<span class="home_hover"></span>
<span class="home_hover"></span>
</p>
</div>
</body>
<script>
var index = 0;//标记
var time;//定时器
$(document).ready(function(){
var len=$(".apl_home_layered ul li").length;
//循环
function showstart(){
index++;
if(index == len){
index = 0;
}//加载到最后一张，重新开始
$(".apl_home_layered ul li").eq(index).fadeIn(500).siblings().hide();
var i = $(".home_hoves span").eq(index).css("background-color","#227FFE").siblings().css("background-color","#777");//得到该节点并设置背景样式，其它的兄弟节点设置背景样式
}
//定时
function action(){
time = setInterval(function(){showstart();}, 5000);//定时加载showstart()方法
}
//鼠标移入
$(".home_hoves span").mouseover(function(){
$(this).css("background-color","#227FFE").siblings().css("background-color","#777");
var s = $(this).index();
$(".apl_home_layered ul li").eq(s).fadeIn(500).siblings().hide();
//console.log(s);
clearInterval(time);//移除定时器
});
//鼠标移出
$(".home_hoves span").mouseout(function(){
action();//加载定时器
});
action();//初始化加载action()方法
});
</script>
</html>
3、之前的轮播图：(这个是原生的，没用到jQuery，记得引入图片路径)
<html >
<head>
<title>轮播图</title>
</head>
<body align="center" onload="start()">
<img id="imgs" src = "images/spring.jpg" width="400px" height="400px"><br>
<span style="cursor:pointer;color:red" onmouseover="stop(0)"onmouseleave="start()">春天</span>
<span style="cursor:pointer;color:green" onmouseover="stop(1)"onmouseleave="start()">夏天</span>
<span style="cursor:pointer;color:yellow" onmouseover="stop(2)"onmouseleave="start()">秋天</span>
<span style="cursor:pointer;color:purple" onmouseover="stop(3)"onmouseleave="start()">冬天</span>
</body>
<script>
var index = 0;
function showstart(){
var image = ["images/spring.jpg","images/summer.jpg","images/autumn.jpg","images/winter.jpg"];
var a = document.getElementsByTagName("img");
a[0].src = image[index];
index++;
if(index == 4){
index = 0;
}
}
var time;
function start(){
time = setInterval("showstart()",1000);
}
function stop(i){
clearInterval(time);
index = i;
showstart();
}
</script>
</html>
4、拥有一个自己的主观思想，生活就很简单（生活不是学习，是调节）
生活中，有忧伤就有快乐；而我，是在快乐中忧伤；独行的路上，不是在享受着快乐，而是忍受着孤独，增强韧性，品味心声！
