zoukankan html css js c++ java

运用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>

查看全文

相关阅读:
Python解释器相关知识
 简单了解下Flask
Scoket编程
 __file__的作用
 jquery编写可折叠列表
 浑浑噩噩的一天
 js实现杨辉三角
 js闭包
 python读取word表格
 HTMLTestRunner报告

原文地址：https://www.cnblogs.com/xiaodouding/p/6151270.html