暂存2

作者: 好多柱 | 来源:发表于2022-06-11 21:45 被阅读0次

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

#main {
  /* width: 1000px; */
  margin: 0 auto;
}

#banner {
  /* width: 1000px; */
  overflow: hidden;
  position: relative;
}

#ul-imgs {
  list-style: none;
}

#ul-imgs.transition {
  transition: all .5s linear;
}

#ul-imgs>li {
  width: 300px;
  box-sizing: border-box;
  float: left;
  /* background:red; */
  border: 1px solid red;
  margin-right: 50px;
  height: 50px;
}

</style>
</head>

<body>
<main id="main">
<div id="banner">
<ul id="ul-imgs" style="width:5000px; margin-left:0px;">
<li><a href="javascript:;">111</a></li>
<li><a href="javascript:;">222</a></li>
<li><a href="javascript:;">333</a></li>
<li><a href="javascript:;">444</a></li>
<li><a href="javascript:;">5555</a></li>
<li><a href="javascript:;">6666</a></li>

<li><a href="javascript:;">111</a></li>
<li><a href="javascript:;">222</a></li>
<li><a href="javascript:;">333</a></li>
</ul>
</div>
</main>
<script>
var i = 0;
var LIWIDTH = 300+50;
var DURATION = 500;
var LICOUNT = 6;
var ulImgs = document.getElementById("ul-imgs");
function moveTo(to) {
if (to == undefined) {
to = i + 1;
}
if (i == 0) {
if (to > i) {
ulImgs.className = "transition";
} else {
ulImgs.className = "";
ulImgs.style.marginLeft = -LIWIDTH * LICOUNT + "px";
setTimeout(function () {
moveTo(LICOUNT - 1);
}, 100);
return;
}
}
i = to;
ulImgs.style.marginLeft = -i * LIWIDTH + "px";
console.log(i);
if (i == LICOUNT) {
i = 0;
setTimeout(function () {
ulImgs.className = "";
ulImgs.style.marginLeft = 0;
}, DURATION)
}
}
</script>
<script>
var interval = 3000;
var timer = setInterval(function () {
moveTo()
}, 3000);
var banner = document.getElementById("banner");
banner.onmouseover = function () {
clearInterval(timer);
}
banner.onmouseout = function () {
timer = setInterval(function () {
moveTo()
}, 3000);
}
</script>

</script>
</body>

</html>

相关文章

  • 暂存2

    Document * {margin: 0;padding: 0;}

  • 【Git】add命令对文件组合提交

    【详细操作如下】: 【1】 加入文件到暂存区步骤 【2】撤销暂存区的文件 【3】查看暂存区文件改动内容 【4】暂存...

  • Git解决冲突

    一、合并步骤 1、本地暂存 2、拉取仓库代码 3、查看暂存标识 4、取出本地暂存 5、解决冲突

  • git stash暂存的操作

    1. 暂存操作 2. 查看当前暂存的记录 3. 恢复暂存的工作 ‘pop命令恢复,恢复后,暂存区域会删除当前的记录...

  • Git基础二

    一.撤销操作1.取消暂存已暂存 ---> 修改未暂存 2.取消修改已修改 ---> 撤销修改 二.远程仓库的使用远...

  • 开发错分支后的----解决方案!

    4 步教你把开发的导进自己的分支 1、暂存改动或者开发的代码 2、把暂存的文件提交到git的暂存栈中 3、切换到你...

  • 作业操作截图暂存2

  • git 增加/删除文件

    添加指定文件到暂存区 $ git add [file1] [file2] ... 添加指定目录到暂存区,包括子目录...

  • 暂存

    你好

  • 暂存

    1. 宇宙大爆炸,盘古开天地。从开始的浑然一体,正是因为有个边界,才有了后来的一个个分离小体。而这边界,就是每个个...

网友评论

      本文标题:暂存2

      本文链接:https://www.haomeiwen.com/subject/atmwmrtx.html