<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图切换</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.tit{
height:170px;
width:490px;
/* border: 1px saddlebrown solid; */
overflow: hidden;
position: relative;
margin:200px auto;
}
.tit ul{
position:absolute;
top: 0;
left: 0;
}
.tit ul li{
/* height:170px; */
/* width: 490px; */
visibility: inherit;
}
.tit ol{
position:absolute;
right:5px;
bottom:10px;
}
.tit ol li{height:20px; width: 20px;
background:#ccc;
border:solid 1px #666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;}
.tit ol .on{background:#E97305;
color:#fff;}
</style>
<script type="text/javascript">
//封装ID函数
function getId(id){
return typeof id==="string"?document.getElementById(id):id;
}
window.onload=function(){
var wrap=getId("tit");
var image_list=getId("pic").getElementsByTagName("li");
var tag_list=getId("list").getElementsByTagName('li');
var index=0;
var timer=null;
if(image_list.length!=tag_list.length){
return;
}
for(var i=0;i<tag_list.length;i++){
tag_list[i].id=i;
// tag_list[i].onclick=a_onclick;//点击
// tag_list[i].onmouseover=a_onclick;//鼠标经过
tag_list[i].onmouseover=function(){
if(timer){
clearInterval(timer);
timer=null;
}
for(var t=0;t<tag_list.length;t++){
tag_list[t].className="";
image_list[t].style.display="none";
}
this.className="on";
image_list[this.id].style.display="block";
index=this.id;//替换鼠标移动后index的值
}
tag_list[i].onmouseout=function(){
// start_time();
timer=setInterval(function(){
index++;
if(index>=tag_list.length){
index=0;
}
for(var k=0;k<tag_list.length;k++){
tag_list[k].className="";
image_list[k].style.display="none";
}
tag_list[index].className="on";
image_list[index].style.display="block";
},2000);
}
}
//封装点击切换函数
function a_onclick(){
var that=this;
// lay_time();
// reset();
function reset(){
for(var j=0;j<tag_list.length;j++){
tag_list[j].className="";
image_list[j].style.display="none";
}
this.className="on";
image_list[this.id].style.display="block";
}
function lay_time(){//封装延时切换函数
if(timer){//清除定时器
clearTimeout(timer);
timer=null;
}
timer=setTimeout(function(){//延时切换
for(var j=0;j<tag_list.length;j++){
tag_list[j].className="";
image_list[j].style.display="none";
}
that.className="on";
image_list[that.id].style.display="block";
},1000);
}
}
function start_time(){//封装自动切换函数
timer=setInterval(function(){
index++;
if(index>=tag_list.length){
index=0;
}
for(var k=0;k<tag_list.length;k++){
tag_list[k].className="";
image_list[k].style.display="none";
}
tag_list[index].className="on";
image_list[index].style.display="block";
},2000);
}
start_time();
}
</script>
</head>
<body>
<div class="tit" id="titid">
<div class="image-box">
<ul id="pic">
<li><img src="../img/image01.jpg" style="display: block" alt=""></li>
<li><img src="../img/image02.jpg" alt=""></li>
<li><img src="../img/image03.jpg" alt=""></li>
<li><img src="../img/image04.jpg" alt=""></li>
<li><img src="../img/image05.jpg" alt=""></li>
</ul>
</div>
<div class="tag-box">
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;
padding:0;
list-style:none;}
.wrap{height:170px;
width:490px;
margin:60px auto;
overflow: hidden;
position: relative;
margin:100px auto;}
.wrap ul{position:absolute; transition: all 1s;
-webkit-transition: all 1s; /* Safari */ }
.wrap ul li{height:170px;}
.wrap ol{position:absolute;
right:5px;
bottom:10px;}
.wrap ol li{height:20px; width: 20px;
background:#ccc;
border:solid 1px #666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;}
.wrap ol .on{background:#E97305;
color:#fff;}
</style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic'),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
// 定义并调用自动播放函数
function autoplay(){
index++;
if(index == list.length){
index = 0;
}
autoImg()
}
timer = setInterval(function(){ autoplay() },3000)
// 定义图片切换函数
function autoImg(){
for( var i=0; i<list.length;i++){
list[i].className = "";
}
list[index].className = "on";
pic.style.marginTop = index*-170+"px";
}
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function(){/*鼠标引入，清除定时器，轮播图停止*/
clearInterval(timer);
};
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function(){/*鼠标移出，重新调用定时器，轮播图开始*/
timer = setInterval(function(){ autoplay() },3000)
};
// 遍历所有数字导航实现划过切换至对应的图片
for( var i = 0; i<list.length;i++){
list[i].index = i;
list[i].onmousemove = function(){
index = this.index ;// 重置索引值
// alert(this.index)
autoImg()
}
}
}
</script>
</head>
<body>
<div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>