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

Posted 2020-08-21 易小川

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大图轮播-带有方向导航箭头相关的知识，希望对你有一定的参考价值。


<!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" onmouseover="Zhi()" onmouseout="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>

以上是关于大图轮播-带有方向导航箭头的主要内容，如果未能解决你的问题，请参考以下文章

大图轮播-带有图标标记

猫头鹰轮播导航箭头不适用于 WordPress

带箭头和圆点的轮播

将 Slick 轮播导航箭头与幻灯片图像而不是其下方的文本垂直对齐

使用导航组件将返回箭头添加到片段

将 Slick 轮播水平箭头更改为带有字体真棒箭头的向上和向下箭头