虽然是一个简单的案例,但思想确实很巧妙,且一通百通!
主要原理:利用利用动态创建一个与当前相同的图片条,利用scrollLeft(滚动条的左水平偏移来实现滚动 用利用视觉暂留效应,实现图条的无缝循环;
<!-- 像电子屏一样的循环滚动 -->
<!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>图片无缝滚动</title>
<style>
body {
margin: 0%;
padding: 0%;
}
.d1,
.d3 {
width: 3200px;
height: 200px;
float: left;
}
.d1>img,
.d3>img {
width: 400px;
height: 200px;