首页 > 代码库 > 大图轮播-带有方向导航箭头

大图轮播-带有方向导航箭头

2024-08-24 02:23:31   223人阅读

技术分享

 


<!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">
#datu
{
    width:1000px;
    height:500px;
    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>
</head>


<body>
<div id="datu" onm ouseover="Zhi()" onm ouseout="Li()" onclick="Chang()">
    <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="500">
        
            <td><img src="image/datu1-lhd-1-2880x1480.jpg" width="1000" /></td>
            <td><img src="image/datu2-rx-1-2880x1480.jpg"  width="1000"/></td>
            <td><img src="image/datu3-carousel-1-2880x1480.jpg" width="1000" /></td>
            <td><img src="image/datu4-kv-16-2880x1480.jpg"  width="1000"/></td>
            <td><img src="image/datu5-overview-kv-1-2880x1480.jpg" width="1000" /></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>-4000)
    {
        document.getElementById("ta").style.left=(ta-1000)+"px";
        ta=ta-1000;
    }
    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+1000)+"px";
        ta=ta+1000;
    }
    else
    {
        document.getElementById("ta").style.left="-4000px";
    }
}
function you()
{
    var ta = parseInt(document.getElementById("ta").style.left);
    if(ta>-4000)
    {
        document.getElementById("ta").style.left=(ta-1000)+"px";
        ta=ta-1000;
    }
    else
    {
        document.getElementById("ta").style.left="0px";
    }
}








</script>

 

大图轮播-带有方向导航箭头


联系
我们