轮播效果及原理的分析:
1.定时器:反复性定时器;
2.页面加载完成之后才回去切换图片:onload事件;
3.鼠标放到图片上,图片停止切换;鼠标离开图片,图片继续切换(动起来);
4.鼠标放到列表上,图片停止到对应的图片,列表标的背景颜色也要改变;
5.鼠标离开列表,图片继续自动切换,列表标背景颜色也自动切换;
第1步:通过定时器实现自动切换:
效果:
源码:
<script type="text/javascript">
//页面加载完成之后让图片动起来
window.onload = init;
var i = 1;
function init(){
window.setInterval("tupian()",1000);
}
//让图片切换的函数
function tupian(){
//获取img对象
var obj = document.getElementById("d1");
i++;
//自己写的,%6取余思想,略微绕完了
//i = i%6;
//if (i == 0)
// i++;
//推荐写法:当溢出时,重新给i赋值为1;
if (i>5) {
i = 1;
}
obj.src = "images/"+i+".png";
}
</script>
<body>
<img id="d1" alt="images/1.png" src="images/1.png">
</body>
第2步:鼠标放图片上停止自动切换:
源码:
function stopTo(){
window.clearInterval(timer);
}
//鼠标离开继续切换
function starTo(){
init();
}
</script>
<body>
<img id="d1" alt="images/1.png" src="images/1.png" οnmοuseοver="stopTo()" οnmοuseοut="starTo()">
</body>
第3步:增加对应标号,当鼠标悬浮在标号上时停止切换并显示出对应图片:
源码:
<style type="text/css">
div{
border: 1px solid red;
width: 660px;
}
div ul{
float: right;
}
ul li{
list-style: none;
border: 1px solid black;
width: 18px;
height: 22px;
text-align: center;
text-height: 22px;
}
</style>
function tingtu(e){
var obj = document.getElementById("d1");
//obj.src = "images/1.png";
var num = e.innerHTML;
obj.src = "images/"+num+".png";
window.clearInterval(timer);
}
<body>
<div>
<img id="d1" src="images/1.png" οnmοuseοver="stopTo()" οnmοuseοut="starTo()">
<ul>
<li οnmοuseοver="tingtu(this)">1</li>
<li οnmοuseοver="tingtu(this)">2</li>
<li οnmοuseοver="tingtu(this)">3</li>
<li οnmοuseοver="tingtu(this)">4</li>
<li οnmοuseοver="tingtu(this)">5</li>
</ul>
</div>
</body>
第4步:鼠标离开li标签时,图片自动切换:
在li中添加onmouseout事件
需要注意的是:在上一步的停图时,我们需要将所停的图片记录下来,接下来继续依次切换,而不是直接在原有基础上进行切换;
第5步:鼠标停留li标签时,标签改变颜色:
首先获取所有的li标签,并把其背景颜色统一;在onmouseover时通过this将当前li背景颜色突出:
源码:
for (var i = 1; i <= 5; i++) {
var obj = document.getElementById("li"+i);
obj.style.background = "white";
}
e.style.background = "orange";
第6步:当图片自动切换时,对应的标签改变背景颜色:
首先在切换时把所有的背景颜色统一,然后获取到当前切换的图片对应的li,进行背景色设置:
完整源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
div{
border: 1px solid red;
width: 660px;
}
div ul{
float: right;
}
ul li{
list-style: none;
border: 1px solid black;
width: 18px;
height: 22px;
text-align: center;
text-height: 22px;
}
</style>
<script type="text/javascript">
//页面加载完成之后让图片动起来
window.onload = init;
var i = 1;
var timer;
function init(){
var obj = document.getElementById("li1");
obj.style.background = "orange";
timer = window.setInterval("tupian()",500);
}
//让图片切换的函数
function tupian(){
//获取img对象
var obj = document.getElementById("d1");
i++;
//自己写的,%6取余思想,略微绕完了
//i = i%6;
//if (i == 0)
// i++;
//推荐写法:当溢出时,重新给i赋值为1;
if (i>5) {
i = 1;
}
obj.src = "images/"+i+".png";
clearlicolor();
var licolor = document.getElementById("li"+i);
licolor.style.background = "orange";
}
//鼠标放上停止切换
function stopTo(){
window.clearInterval(timer);
}
//鼠标离开继续切换
function starTo(){
timer = window.setInterval("tupian()",500);
}
function tingtu(e){
var obj = document.getElementById("d1");
//obj.src = "images/1.png";
var num = e.innerHTML;
i = num;
obj.src = "images/"+num+".png";
clearlicolor();
e.style.background = "orange";
window.clearInterval(timer);
}
//清除所有标签的背景颜色
function clearlicolor(){
for (var i = 1; i <= 5; i++) {
var objli = document.getElementById("li"+i);
objli.style.background = "white";
}
}
</script>
</head>
<body>
<div>
<img id="d1" src="images/1.png" οnmοuseοver="stopTo()" οnmοuseοut="starTo()">
<ul>
<li id="li1" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">1</li>
<li id="li2" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">2</li>
<li id="li3" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">3</li>
<li id="li4" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">4</li>
<li id="li5" οnmοuseοver="tingtu(this)" οnmοuseοut="starTo()">5</li>
</ul>
</div>
</body>
</html>
效果图:
注:仅供个人学习使用,转载请注明出处