• 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;}

  • 相关阅读:
    word2vec的Java源码【转】
    将博客搬至CSDN
    去掉中英文符号
    搜索引擎原理和简单过程【转】
    写国际会议论文和期刊的一些注意事项
    Java中Map根据键值(key)或者值(value)进行排序实现
    solr 查询获取数量getCount()
    【solr filter 介绍--转】http://blog.csdn.net/jiangchao858/article/details/54989025
    将中文数字转为数字
    java.util.Properties类的介绍-配置文件的读写【-Z-】
  • 原文地址:https://www.cnblogs.com/qigege/p/5378535.html
Copyright © 2020-2023  润新知