大图轮播

Posted 2020-08-23 长腿野生璇**

tags:

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

整体思路；

设一个div，设置宽与高。嵌入一个表格，确定好位置后，插入图片，超出部分隐藏。

在js中定义一个变量接受left的值，并赋值为0px，即初始值

设置一个函数

function a（）{在值中减掉一张图片的宽度}

设置一个延时时间

<style>
#tu{ width:400px; height:300px; position:relative; margin:50px auto; overflow:hidden; border:1px solid #000;}
#sk{ position:relative; left:0px; top:0px; transition:0.5s;}
</style>
</head>

<body>
<div id="tu" onclick="Change()">
<table id="sk" cellpadding="0" cellspacing="0">
<tr height="300">
<td><img src="" height="300" /></td>
<td><img src="图片" /></td>
<td><img src="图片" /></td>
<td><img src="图片" height="300" /></td>
</tr>
</table>

</div>

</body>
</html>
<script>
document.getElementById("sk").style.top="0px";
function Change()
{
    var sk = parseInt(document.getElementById("sk").style.top);
    
    if(sk>-1200)
    {
    document.getElementById("sk").style.top=(sk-400)+"px";
    }
    else{
          document.getElementById("sk").style.top="0px"
        }
        window.setTimeout("Change()",1700)
}
window.setTimeout("Change()",1700)
</script>

以上是关于大图轮播的主要内容，如果未能解决你的问题，请参考以下文章

swiper轮播，小轮播图，点击变大轮播图（小图变大图）