<style type="text/css"> #container{ width:413px; margin:0 auto} #container div{ float:left} ul{ margin:0px; padding:0px; list-style-type:none; width:20px; height:190px; float:left; border-right:2px solid #ffffff} ul li{ text-align:center; font-weight:bold; font-size:12px} .title1{ background:pink} .title2{ background:green} .title3{ background:red} .title4{ background:blue} img{ width:190px; height:190px} </style>
<script type="text/javascript"> var adv_count; var curr = 1; var timer; var uls; window.onload = function() { adv_count = document.getElementById("container").getElementsByTagName("div").length; //获取图片数量 adv_show(curr);//显示当前图片，其他图片隐藏 timer = window.setInterval("adv_show()", 1000);//设置定时器 1秒切换一次图片 uls = document.getElementsByTagName("ul"); for (var i = 0; i < uls.length; i++) { uls[i].onmouseover = function() { //鼠标移动到图片上时候，显示当前图片 自动播放结束 clearInterval(timer); //清除定时器 adv_show(this.title); //显示当前图片 } uls[i].onmouseout = function() { timer = window.setInterval("adv_show()", 1000); //鼠标离开时候，重新启动自动播放 } } } function adv_show(index) { if (index == undefined) { //判断是否为自动播放图片 curr++; if (curr > adv_count) { curr = 1; } } else { curr = index; //非自动播放 } for (var i = 1; i <= adv_count; i++) { if (i == curr) { document.getElementById("adv" + curr).style.display = "block"; //显示当前图片 } else { document.getElementById("adv" + i).style.display = "none";//其他图片隐藏 } } }
</script>
//页面布局
<div id="container"> <div id="adv1"> <a href="#"> <img src="images/1.jpg" /></a></div> <ul class="title1" title="1"> <li>第一幅图片</li> </ul> <div id="adv2"> <a href="#"> <img src="images/2.jpg" /></a></div> <ul class="title2" title="2"> <li>第二幅图片</li> </ul> <div id="adv3"> <a href="#"> <img src="images/3.jpg" /></a></div> <ul class="title3" title="3"> <li>第三幅图片</li> </ul> <div id="adv4"> <a href="#"> <img src="images/4.jpg" /></a></div> <ul class="title4" title="4"> <li>第四幅图片</li> </ul> </div>
转载于:https://www.cnblogs.com/fengmingming/p/4207890.html
相关资源：智点门窗工厂软件