首页 > 代码库 > 百叶窗推拉图片
百叶窗推拉图片
<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="http://www.mamicode.com/#">
<img src="http://www.mamicode.com/images/1.jpg" /></a></div>
<ul class="title1" title="1">
<li>第一幅图片</li>
</ul>
<div id="adv2">
<a href="http://www.mamicode.com/#">
<img src="http://www.mamicode.com/images/2.jpg" /></a></div>
<ul class="title2" title="2">
<li>第二幅图片</li>
</ul>
<div id="adv3">
<a href="http://www.mamicode.com/#">
<img src="http://www.mamicode.com/images/3.jpg" /></a></div>
<ul class="title3" title="3">
<li>第三幅图片</li>
</ul>
<div id="adv4">
<a href="http://www.mamicode.com/#">
<img src="http://www.mamicode.com/images/4.jpg" /></a></div>
<ul class="title4" title="4">
<li>第四幅图片</li>
</ul>
</div>
百叶窗推拉图片