Javascript实现无缝轮播

Javascript实现无缝轮播

html部分

<!-- 先用一个大盒子放置轮播的内容 -->
		<div>
			<!--在设置一个有足够宽大盒子让他放置轮播内容-->
			<!-- 使用ul>li是因为轮播内容相同，比较方便 -->
			<ul id="box">
				<!--设置轮播的内容  -->
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>1</li>
				<li>2</li>
			</ul>
		</div>				

css部分

/* 开始写轮播图的css样式 */
			*{
				margin: 0px;
				padding: 0px;
			}
			/* 先给大盒子固定的宽高，让它超出部分隐藏 */
			div{
				width: 300px;
				height: 150px;
				overflow: hidden;
				margin: 100px auto;
				border: 1px solid #000;
			}
			ul{
			/* 给ul一个足够的宽让他能完全放置轮播的内容 */
				width: 9999px;
				position: relative;
				/* 清除li的样式 */
				list-style: none;
				/* 给弹性盒子，让它的子集全部并排 */
				display: flex;
				left: 0;
			}
			li{
				width: 300px;
				height: 150px;
			}
			li:nth-of-type(1),li:nth-of-type(5){
				background-color: skyblue;
			}
			li:nth-of-type(2),li:nth-of-type(6){
				background-color: pink;
			}
			li:nth-of-type(3){
				background-color: aqua;
			}
			li:nth-of-type(4){
				background-color: thistle;
			}

javascript部分

// 给定时器定义的变量
			var timer;
			var num=-1;
			// 获取所有的li标签
			var lis=document.getElementsByTagName('li');
			// 创建定时器，每10ms就执行一次
			timer=setInterval(function(){
				num++;
				// 做个判断
				// 每一个li有300的宽，一共有4个
				// 所以num超出li多余的部分，如果num超出就返回0，否则就往左移动num++个px
				if(num>300*4){
					num=0;
				}
				box.style.left=-num+'px'
			},10)

一个简单的无缝轮播就完成了