百叶窗推拉图片

 <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