我所实现的和别的博主大大不太一样，我所采用的的是z-index方式以及浮动的方式，实现的轮播图
实现的效果图为：
html主要实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/轮播图.css"/>
<script src="js/轮播图.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="all">
<img src="img/girl2.jpg"/>
<img src="img/girl3.jpg"/>
<img src="img/girl4.jpg"/>
<img src="img/girl5.jpg"/>
<img src="img/girl6.jpg"/>
<span id="left"><</span>
<span id="right">></span>
<div id="spot">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
css样式代码：
#all{
height: 500px;
width: 350px;
margin: 0px auto;
border: 1px solid gainsboro;
position: relative;
}
img{
height: 500px;
width: 350px;
/*float: left;*/
position: absolute;
z-index: -2;
}
span{
display: inline-block;
/*z-index: 5;*/
height: 40px;
width: 25px;
line-height: 40px;
text-align: center;
background-color: lightgray;
}
#left{
border-radius: 0px 40px 40px 0px;
float: left;
/*margin-left: auto;*/
margin-top: 230px;
cursor: pointer;
}
#right{
border-radius: 40px 0px 0px 40px;
float: right;
margin-top: 230px;
cursor: pointer;
}
ul,li{
list-style-type: none;
}
li{
height: 20px;
width: 20px;
background-color: #CCCCCC;
display: inline-block;
border-radius: 20px;
margin-right: 10px;
}
#spot{
text-align: center;
margin-top: 460px;
}js效果代码：
window.onload=function(){
var i = 0;
var img;
var li;
var time1;
function time(){
time1=setInterval(function(){//自动拨动
img = document.getElementsByTagName("img")[i];
img.style.zIndex=-2;
li = document.getElementsByTagName("li")[i];
li.style.backgroundColor="#CCCCCC";
i++;
if(i==5){
i=0;
}
if(i>=0){
li=document.getElementsByTagName("li")[i];
li.style.backgroundColor="red";
img = document.getElementsByTagName("img")[i];
img.style.zIndex=-1;
}else if(i==0){
li=document.getElementsByTagName("li")[4];
li.style.backgroundColor="red";
img = document.getElementsByTagName("img")[4];
img.style.zIndex=-1;
}
},1500);
};
time();
var left = document.getElementById("left");
left.onclick = function(){
img = document.getElementsByTagName("img")[i];
img.style.zIndex=-2;
li = document.getElementsByTagName("li")[i];
li.style.backgroundColor="#CCCCCC";
i--;
if(i>=0){
li=document.getElementsByTagName("li")[i];
li.style.backgroundColor="red";
img = document.getElementsByTagName("img")[i];
img.style.zIndex=-1;
}else if(i==-1){
li=document.getElementsByTagName("li")[4];
li.style.backgroundColor="red";
img = document.getElementsByTagName("img")[4];
img.style.zIndex=-1;
}
if(i==-1){
i=4;
}
}
var right = document.getElementById("right");
right.onclick = function(){
img = document.getElementsByTagName("img")[i];
img.style.zIndex=-2;
li = document.getElementsByTagName("li")[i];
li.style.backgroundColor="#CCCCCC";
i++;
if(i==5){
i=0;
}
if(i>=0){
li=document.getElementsByTagName("li")[i];
li.style.backgroundColor="red";
img = document.getElementsByTagName("img")[i];
img.style.zIndex=-1;
}else if(i==0){
li=document.getElementsByTagName("li")[0];
li.style.backgroundColor="red";
img = document.getElementsByTagName("img")[0];
img.style.zIndex=-1;
}
}
var list =document.getElementsByTagName('li');
for(var j=0;j<5;j++){
(function(j){
list[j].onmouseover=function () {
clearInterval(time1);
li=document.getElementsByTagName("li")[i];
li.style.backgroundColor="#CCCCCC";
img = document.getElementsByTagName("img")[i];
img.style.zIndex=-2;
this.style.backgroundColor="red";
img = document.getElementsByTagName("img")[j];
img.style.zIndex=-1;
}
list[j].onmouseout=function () {
i=j;
time();
}
})(j);
}
}采用的图片：
