JS焦点图 上下翻动 支持IE6

<div class="slider">

    <ul class="num" id="homePushName">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    
    <ul class="bg" id="homePushBg">
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
    </ul>
    
    <ul style="margin-top:0px;" class="pic" id="homePushShow">
        <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动" src="images/1.jpg" /></a></li>
        <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动" src="../images/2.jpg" /></a></li>
        <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt=" javascript滚动图片带按钮控制上下左右自动无缝滚动" src="images/3.jpg" /></a></li>
        <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt=" javascript滚动图片按钮控制图片左右自动滚动" src="images/4.jpg" /></a></li>
        <li><a href="http://www.17sucai.com/"><img width="490" height="180" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li>
    </ul>
    
</div>

<script type="text/javascript">

    var listItem = document.getElementById("homePushShow");
    var tList = document.getElementById("homePushName").childNodes;
    var controlItem = [];
    for (var i = 0; i < tList.length; i++) {
        if (tList[i].nodeName.toLowerCase() == "li") {
            controlItem.push(tList[i]);
        }
    }
    var picCount = controlItem.length;
    var cid = 0;
    var tid = Math.floor(Math.random() * picCount);
    window.cTop = 0
    window.gTop = 0;
    window.speed = 0;
    window.controlAction = "";
    window.timeCount = 0;
    setInterval(function () {
        if (cid != tid) {
            gTop = tid * 180;
            speed = (gTop - cTop) / 10;
            cid = tid;
            for (var i = 0; i < picCount; i++) {
                controlItem[i].className = ((i == cid) ? "current" : "");
            }
        }
        if (window.cTop != window.gTop) {
            window.cTop += parseInt(speed);
            listItem.style.marginTop = "-" + parseInt(window.cTop) + "px";
        }
        document.getElementById("homePushBg").style.display = "block";
        document.getElementById("homePushName").style.display = "block";
    }, 20);

    for (var i = 0; i < picCount; i++) {
        controlItem[i].onmouseover = function () {
            var goId = parseInt(this.innerHTML) - 1;
            clearTimeout(window.controlAction);
            window.controlAction = setTimeout(function () {
                tid = goId;
                timeCount = 0;
            }, 300);
        }
        controlItem[i].onmouseout = function () {
            clearTimeout(window.controlAction);
        }
    }

    setInterval(function () {
        timeCount += 1
        if (timeCount >= 5) {
            window.controlAction = setTimeout(function () {
                tid = tid + 1;
                if (tid >= picCount) { tid = 0; }
            }, 20);
            timeCount = 0;
        }
    }, 1000);


 

    
</script>

/* slider */
.slider{position:relative;width:490px;height:180px;overflow:hidden;border:solid 1px #ddd;margin:100px auto}
.slider .pic li{height:180px;overflow:hidden;}
.slider .pic img{width:490px;height:180px;}
.slider .num{z-index:2;position:absolute;right:10px;bottom:7px;width:95px;height:16px;}
.slider .num li{float:left;display:inline;width:16px;height:16px;line-height:16px;margin-left:3px;text-align:center;color:#595959;cursor:pointer;}
.slider .num li.current{background:#ffffff;font-weight:bold;color:#ff4e00;}
.slider .bg{z-index:1;position:absolute;right:10px;bottom:7px;width:95px;height:16px;}
.slider .bg li{float:left;display:inline;width:16px;height:16px;line-height:16px;margin-left:3px;background-color:#fff;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background:#ffffff;font-size:0;text-align:center;color:#595959;}

转载于:https://www.cnblogs.com/qigege/p/5378535.html