轮播效果及原理的分析:
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" onmouseover="stopTo()" onmouseout="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" onmouseover="stopTo()" onmouseout="starTo()"> <ul> <li onmouseover="tingtu(this)">1</li> <li onmouseover="tingtu(this)">2</li> <li onmouseover="tingtu(this)">3</li> <li onmouseover="tingtu(this)">4</li> <li onmouseover="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" onmouseover="stopTo()" onmouseout="starTo()"> <ul> <li id="li1" onmouseover="tingtu(this)" onmouseout="starTo()">1</li> <li id="li2" onmouseover="tingtu(this)" onmouseout="starTo()">2</li> <li id="li3" onmouseover="tingtu(this)" onmouseout="starTo()">3</li> <li id="li4" onmouseover="tingtu(this)" onmouseout="starTo()">4</li> <li id="li5" onmouseover="tingtu(this)" onmouseout="starTo()">5</li> </ul> </div> </body> </html>
效果图:
注:仅供个人学习使用,转载请注明出处