运用CSS和JS写的大图轮播-带箭头

<style type="text/css">
#datu
{
    width:500px;
    height:400px;
    position:relative;
     margin:auto;
    top:100px;
    border:2px solid #309;
    overflow:hidden;
    
}
#xiao
{
    width:50px;
    height:100px;
    position:absolute;
    left:0px;
    top:200px;
    z-index:5;
     text-align:center; line-height:100px; font-size:100px;
      cursor:pointer;


}
#xiao1
{
    width:50px;
    height:100px;
    position:absolute;
    right:0px;
    top:200px;
        z-index:5;
 text-align:center; line-height:100px; font-size:100px;
 cursor:pointer;

}
#ta
{
    position:relative;
    left:0px;
    top:0px;
    transition:0.7s;}


</style>



<body>
<div id="datu" onmouseover="Zhi()" onmouseout="Li()" onclick="Chang()">
    <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="400">
        
            <td width="500px"><img src="../Documents/未命名站点 2/1.jpg" width="500" /></td>
            <td><img src="../Documents/未命名站点 2/2.jpg"  height="400" width="500"/></td>
            <td><img src="../Documents/未命名站点 2/3.jpg" height="400" width="500"/></td>
            <td><img src="../Documents/未命名站点 2/5.jpg"  height="400"  width="500"/></td>
            <td><img src="../Documents/未命名站点 2/800.jpg" height="400" width="500"/></td>
            <div id="xiao" onclick="zuo()">«</div>
            <div id="xiao1" onclick="you()">»</div>

        </tr>
    </table>
</div>





</body>
</html>
<script>
document.getElementById("ta").style.left="0px";
function Change()
{
    var ta = parseInt(document.getElementById("ta").style.left);
    if(ta>-2000)
    {
        document.getElementById("ta").style.left=(ta-500)+"px";
        ta=ta-500;
    }
    else
    {
        document.getElementById("ta").style.left="0px";
    }
    shi=window.setTimeout("Change()",3000);    
}
var shi =window.setTimeout("Change()",3000);
function Zhi()
{
    window.clearTimeout(shi);    
}
function Li()
{
    shi=window.setTimeout("Change()",1000);    
}
function zuo()
{
    var ta = parseInt(document.getElementById("ta").style.left);
    if(ta<0)
    {
        document.getElementById("ta").style.left=(ta+500)+"px";
        ta=ta+500;
    }
    else
    {
        document.getElementById("ta").style.left="-2000px";
    }
}
function you()
{
    var ta = parseInt(document.getElementById("ta").style.left);
    if(ta>-2000)
    {
        document.getElementById("ta").style.left=(ta-500)+"px";
        ta=ta-500;
    }
    else
    {
        document.getElementById("ta").style.left="0px";
    }
}








</script>

相关阅读:
postfix 邮件中继配置
 shell脚本网络流量实时查看
 zabbix配置邮件报警(第四篇)
pptp服务故障
 Centos6.7 ELK日志系统部署
 rrdtool 实践
 Centos6.7安装Cacti教程
 Nagios事件机制实践
 Nrpe 插件安装教程
 如何查找一个命令由哪个rpm安装&&rpm 的相关查询方法
原文地址：https://www.cnblogs.com/xiaodouding/p/6151270.html