zoukankan html css js c++ java

[t]淘宝幻灯片上下滑动效果

要点：

定时器的使用
用一个公用的值iNow来确定位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝幻灯片上下滑动效果 </title>
<style type="text/css">
    * { padding: 0; margin: 0; }
    li { list-style: none; }
    img { border: none; }
    body { background: #ecfaff; }
    .play {  470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; }
    ol { position: absolute; right: 5px; bottom: 5px; z-index: 2; }
    ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
    .active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }
    
    ul { position: absolute; top: 0; left: 0; z-index: 1; }
    ul li {  470px; height: 150px; float: left; }
    ul img { float: left;  470px; height: 150px; }    
</style>
<script type="text/javascript">
window.onload=function ()
{
    var oDiv = document.getElementById('play');
    var oOl = oDiv.getElementsByTagName('ol')[0];
    var aBtn = oOl.getElementsByTagName('li');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oOl.getElementsByTagName('li');
    var timer = null;
    var autoPlaytimer = null;
    var i=0;
    var iNow = 0;
    
    for(i=0; i<aBtn.length; i++){
        aBtn[i].index = i;
        aBtn[i].onclick = function(){
            iNow = this.index;
            tab();
        }
    }
    
    function tab(){
        for (i = 0; i < aBtn.length; i++) {
            aBtn[i].className = '';
        }
        aBtn[iNow].className = 'active';
        
        startMove(-150 * iNow);
    }
    function next(){
        iNow++;
        iNow==aBtn.length ? iNow=0: '';
        tab();
    }
    
    autoPlaytimer = setInterval(next, 3000);
    
    oDiv.onmouseover = function(){
        clearInterval(autoPlaytimer);
    }
    oDiv.onmouseout = function(){
        autoPlaytimer = setInterval(next, 3000);
    }
    
    function startMove(iTarge){
        clearInterval(timer);
        timer = setInterval(function(){
            doMove(iTarge);
        }, 30);
    }
    function doMove(iTarge){
        var speed = (iTarge - oUl.offsetTop)/5;
        speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
        
        oUl.style.top = oUl.offsetTop + speed + 'px';
    }
};
</script>
</head>

<body>
<div class="play" id="play">
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.miaov.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.miaov.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.miaov.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.miaov.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.miaov.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
    </ul>
</div>
</body>
</html>

查看全文

相关阅读:
微信登录
 Nginx负载均衡的优缺点
 elk 比较不错的博客
 Filebeat 5.x 日志收集器安装和配置
 日志管理系统ELK6.2.3
python3爬虫编码问题
 zabbix监控进程
 linux下查询进程占用的内存方法总结
 Ubuntu 16.04安装Elasticsearch，Logstash和Kibana（ELK）Filebeat
ELK多种架构及优劣

原文地址：https://www.cnblogs.com/niubenbit/p/2769860.html