思路:通过js定时器定时切换图片的src,当鼠标以上按钮的时候改变图片的src属性,并停止轮播,记录当前图片所处轮播的位置,鼠标移出的时候继续轮播。
<!Doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.bt{
width: 15px;
line-height: 15px;
text-align: center;
border: 1px solid gray;
font-size: 12px;
float: left;
margin-right: 10px;
}
.bt:hover{
background: red;
/*设置鼠标样式为手型*/
cursor: pointer;
}
.rd{background: red;}
</style>
</head>
<body>
<div class='banner'>
<img id='lb' src="./lb1.jpg"/>
<div id='btn'>
<div class='bt rd' onmouseover='fun1(1)' onmouseout='fun2()'>1</div>
<div class='bt' onmouseover='fun1(2)' onmouseout='fun2()'>2</div>
<div class='bt' onmouseover='fun1(3)' onmouseout='fun2()'>3</div>
<div class='bt' class='bt' onmouseover='fun1(4)' onmouseout='fun2()'>4</div>
<div class='bt' class='bt' onmouseover='fun1(5)' onmouseout='fun2()'>5</div>
</div>
</div>
</body>
<script type="text/javascript">
//获取到图片,并保存为全局变量
var img=document.getElementById('lb');
//初始化i=1
var i=1;
// var t=setInterval(change,1000);
//切换图片方法
function change(){
//没执行一次加一
i++;
//如果i循环到最大哪张图片,则把i的值赋为1,让它又从第一张开始滚动
if(i==6) i=1;
//处理图片路径
img.src='./lb'+i+'.jpg';
//获取到id为btn的div元素
var div1=document.getElementById('btn');
//获取div1下面所有的div标签
var divArr=div1.getElementsByTagName('div');
//遍历btn下的所有div并设置背景色为白色
for(var k=0;k<divArr.length;k++){
divArr[k].style.background='white';
}
//设置当前div的背景色随着图片轮而变化
divArr[i-1].style.background='red';
// console.debug(i);
}
//调用定时函数,定时切换图片
var t=setInterval(change,1000);
//停止轮播
function stoplb(){
window.clearInterval(t);
}
//开始轮播
function startlb(){
// stoplb();
//注意t应该是对全局变量的一次重新赋值,而不是重新声明为局部变量
//若在t前面加var会导致轮播加快
t=setInterval(change,1000);
}
function fun1(j){
//停止轮播并把i的值赋值为j的值
stoplb();
i=j;
//获取id为btn的div元素标签
var div1=document.getElementById('btn');
//获取div1后面的所有div标签,获取的是一个数组对象
//可以通过名称[索引]的方式访问当中的div元素
var divArr=div1.getElementsByTagName('div');
//遍历div数组对象,把所有的div背景设置为白色
for(var k=0;k<divArr.length;k++){
divArr[k].style.background='white';
}
//把当前div背景设置为红色
divArr[j-1].style.background='red';
//改变鼠标移上后图片的路径
img.src='./lb'+j+'.jpg';
// console.debug('test');
}
function fun2(){
//开始轮播
startlb();
}
</script>
</html>
缺陷:图片名称必须符合一定要求才能轮播。