原生JS写带缩略图的无限平移轮播

最新推荐文章于 2023-02-16 13:46:56 发布

音色丽敏

最新推荐文章于 2023-02-16 13:46:56 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：原生javascript 文章标签：原生JS写带缩略图的无限平移轮播

本文链接：https://blog.youkuaiyun.com/qq_40756247/article/details/90641284

带缩略图的简单的轮播效果图

效果图如下：
在这里插入图片描述
下面是代码：
html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>
					<img src="img/1.jpg" style="top: 0;">
				</li>
				<li>
					<img src="img/2.jpg">
				</li>
				<li>
					<img src="img/3.jpg" >
				</li>
				<li>
					<img src="img/4.jpg" >
				</li>
				<li>
					<img src="img/5.jpg" >
				</li>
				<li>
					<img src="img/6.jpg" >
				</li>
				<li>
					<img src="img/1.jpg">
				</li>
			</ul>
			<div class="ser">
				<div class="left">
				</div>
				<div class="left right">	
				</div>
			</div>
		</div>
		<div class="sbox">
			<ul>
				<li>
					<img src="img/5.jpg" >
				</li>
				<li>
					<img src="img/6.jpg" >
				</li>
				<li>
					<img src="img/1.jpg" >
				</li>