1.定时器调用轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 500px;
height: 332px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.div2{
width: 2500px;
position: absolute;
left: 0;
}
.div2 img{
float: left;
}
.span{
position: absolute;
z-index: 1;
left: 50%;
margin-left:-62.5px;
bottom: 10px;
}
.span span{
float: left;
height: 15px;
width: 15px;
background-color: red;
border-radius:50%;
margin: 0 5px;
opacity: 0.6;
}
</style>
</head>
<body>
<div id="div1">
<div class="div2">
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
</div>
<div class="span">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
var div2 = document.getElementsByClassName("div2")[0];
var div3 = document.createElement("div");
var span = document.getElementsByTagName("span");
div3.innerHTML = div2.innerHTML;
div3.className = "div2";
div1.appendChild(div3);
var left1 = 0;
var left2 = 2500;
var a = 0;
span[a].style.backgroundColor = 'black';
function fun(){
a++;
if(a < 5){
span[a-1].style.backgroundColor = 'red';
span[a].style.backgroundColor = 'black';
}
else{
a = 0;
span[4].style.backgroundColor = 'red';
span[a].style.backgroundColor = 'black';
}
left1 = left1 - 500;
left2 = left2 - 500;
div2.style.left = left1 + "px";
div3.style.left = left2 + "px";
if(left1 == -2500){
left1 = 2500;
}
if(left2 == -2500){
left2 = 2500;
}
for(var i = 0 ;i < span.length ;i++){
span[i].num = i;
span[i].onclick = function(){
var index = this.num;
if(a != index){
span[a].style.backgroundColor = "red";
a = index;
span[a].style.backgroundColor = "black";
};
div2.style.left = -500*index +"px";
left1 = -500*index;
left2 = 2500 + left1;
}
}
}
setInterval(fun,3000)
</script>
</body>
</html>
jQuery点击切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 790px;
height: 340px;
margin: 100px auto;
position: relative;
}
#div1 ul{
list-style: none;
}
#div1 li{
position: absolute;
display: none;
}
#div1 li:first-child{
display: block;
}
#left,#right{
position: absolute;
background-color: rgba(0,0,0,0.2);
color: white;
width: 30px;
height: 60px;
font-size: 36px;
text-align: center;
line-height: 60px;
top: 50%;
margin-top:-30px ;
display: none;
cursor: pointer;
}
#left{
left: 0;
}
#right{
right: 0;
}
#div1:hover span{
display: block;
}
#left:hover,#right:hover{
background-color: rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<div id = "div1">
<ul>
<li><a href=""><img src="images/1.jpg"/></a></li>
<li><a href=""><img src="images/2.jpg"/></a></li>
<li><a href=""><img src="images/3.jpg"/></a></li>
<li><a href=""><img src="images/4.jpg"/></a></li>
<li><a href=""><img src="images/5.jpg"/></a></li>
<li><a href=""><img src="images/6.jpg"/></a></li>
<li><a href=""><img src="images/7.jpg"/></a></li>
<li><a href=""><img src="images/8.jpg"/></a></li>
</ul>
<span id="left"><</span>
<span id="right">></span>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
var index = 0;
$("#right").click(function(){
index++;
if(index == $("#div1 li").length){
index = 0;
}
$("#div1 li").eq(index).fadeIn().siblings().fadeOut();
});
$("#left").click(function(){
index--;
if(index == -1){
index = $("#div1 li").length-1;
}
$("#div1 li").eq(index).fadeIn().siblings().fadeOut();
});
});
</script>
</div>
</body>
</html>
待完善中