便签

-
环状滚动	1. html格式
	2. css样式
	3. transform: translateX
多个li显示在一行	display: inline-block
基础html格式+css样式
通过js设置css参数	1. element.style.setProperty(’transform’, ’translateX(1px)')
	2. element.style.getPropertyValue(’transform')
	3. element.style.cssText = ’left: 10px'
	4. 猜测：通过js获取的css参数, 不来自css文件, 而是html代码的设置
css Position	1. li标签不自动换行: absolute, fixed
	2. 计算绝对位置

样式

css

-
imageList	height	滚动框高度, 滚动框之间的边界
	overflow	向右滚动时, 溢出不触发滚动条
	perspective	1. 滚动框左右的边界
		2. 垂直滚动时, 滚动框跟随滚动
li	width	图片宽度
	padding	第一个参数: top边界, 滚动框之间的间隔
		第二个参数: 嵌套时长宽边界
	position	1. 多个li不自动换行
		2. 采用绝对位置
		3. fixed或absolute都可
	display	li显示在一行

Copy 1.imageList {
 2  height: 158px;
 3  overflow: hidden;
 4  perspective: 2000px;
 5
 6  ul li {
 7    width: 200px;
 8    padding: 2px 2px;
 9    position: fixed;
10    display: inline-block;
11
12    // 去除小黑点
13    // overflow: hidden;
14
15    // 四个角圆润
16    // border-radius: 5px;
17  }
18}

图片存放在无序列表, 使用id标识

html

scrollpic1向右滚动, scrollpic2向左滚动

Copy 1<div class="imageList" id="scrollpic1">
 2  <ul>
 3    <li><img src="1.jpg" /></li>
 4    <li><img src="2.jpg" /></li>
 5    <li><img src="3.jpg" /></li>
 6    <li><img src="4.jpg" /></li>
 7    <li><img src="5.jpg" /></li>
 8    <li><img src="6.jpg" /></li>
 9    <li><img src="1.jpg" /></li>
10    <li><img src="2.jpg" /></li>
11    <li><img src="3.jpg" /></li>
12    <li><img src="4.jpg" /></li>
13    <li><img src="5.jpg" /></li>
14    <li><img src="6.jpg" /></li>
15  </ul>
16</div>
17<div class="imageList" id="scrollpic2">
18  <ul>
19    <li><img src="7.jpg" /></li>
20    <li><img src="8.jpg" /></li>
21    <li><img src="9.jpg" /></li>
22    <li><img src="10.jpg" /></li>
23    <li><img src="11.jpg" /></li>
24    <li><img src="12.jpg" /></li>
25    <li><img src="7.jpg" /></li>
26    <li><img src="8.jpg" /></li>
27    <li><img src="9.jpg" /></li>
28    <li><img src="10.jpg" /></li>
29    <li><img src="11.jpg" /></li>
30    <li><img src="12.jpg" /></li>
31  </ul>
32</div>

图片水平循环滚动

进入判断

Copy1document.addEventListener('DOMContentLoaded', () => {
2  const pics1 = document.querySelectorAll('#scrollpic1 li');
3  const pics2 = document.querySelectorAll('#scrollpic2 li');
4  if (!pics1.length || !pics2.length) return;
5
6  // 后续处理
7});

图片组规格

1. 单张图片宽度200px(ul li width)
   
   考虑到图片间隔:
   

   Copy1const PicWidth = 205;

2. 一组12张图, 实际滚动框宽度:
   

   205px * 12 = 2460px

3. 考虑到左右溢出和窗口宽度, 图片水平位移范围:
   

   Copy1const FrontEnd = 2000; // > window.innerWidth
   2const BackEnd = -460;

步长

Copy1const Step = 0.2;

游标

	范围
向右滚动	0 ~ (FrontEnd - BackEnd)
向左滚动	(BackEnd - FrontEnd) ~ 0

定义游标

全局变量

Copy1let Cur1 = 0;
2let Cur2 = 0;

开启循环定时器, 更新游标

Copy1const ScrollTimerInterval = 5;
2
3const scrollTimer = window.setInterval(function () {
4    Cur1 = (Cur1 + Step) % (FrontEnd - BackEnd); // 向右滚动
5    Cur2 = (Cur2 - Step) % (FrontEnd - BackEnd); // 向左滚动
6}, ScrollTimerInterval);

实现函数: 根据游标实时位置, 平移图片组成员

translatePic

参数

-
pics	图片组
cur	游标

遍历图片组

Copy1function translatePic(pics, cur) {
2    for (let i = 0; i < pics.length; ++i) {
3        // 处理成员
4    }
5}

根据成员的相对位置计算平移

		-
向右滚动	cur	0 ~ (FrontEnd - BackEnd)
	成员偏移	0 ~ (FrontEnd - BackEnd)
	thisCur	0 ~ 2 * (FrontEnd - BackEnd)
向左滚动	cur	(BackEnd - FrontEnd) ~ 0
	成员偏移	0 ~ (FrontEnd - BackEnd)
	thisCur	(BackEnd - FrontEnd) ~ (FrontEnd - BackEnd)

• 控制成员平移范围

  thisCur范围应该为BackEnd ~ FrontEnd
  

  Copy1let thisCur = cur + i * PicWidth;
  2
  3if (thisCur > FrontEnd)
  4    thisCur -= FrontEnd - BackEnd;
  5else if (thisCur < BackEnd)
  6    thisCur += FrontEnd - BackEnd;

• 平移成员

  Copy1const value = 'translateX(' + thisCur + 'px)';
  2pics[i].style.setProperty('transform', value);

完整代码

Copy 1const PicWidth = 205;
 2const FrontEnd = 2000;
 3const BackEnd = -460;
 4const Step = 0.2;
 5const ScrollTimerInterval = 5;
 6
 7function translatePic(pics, cur) {
 8  for (let i = 0; i < pics.length; ++i) {
 9    let thisCur = cur + i * PicWidth;
10
11    if (thisCur > FrontEnd)
12      thisCur -= FrontEnd - BackEnd;
13    else if (thisCur < BackEnd)
14      thisCur += FrontEnd - BackEnd;
15
16    const value = 'translateX(' + thisCur + 'px)';
17    pics[i].style.setProperty('transform', value);
18  }
19}
20
21let Cur1 = 0;
22let Cur2 = 0;
23document.addEventListener('DOMContentLoaded', () => {
24  const pics1 = document.querySelectorAll('#scrollpic1 li');
25  const pics2 = document.querySelectorAll('#scrollpic2 li');
26  if (!pics1.length || !pics2.length) return;
27
28  const scrollTimer = window.setInterval(function () {
29    Cur1 = (Cur1 + Step) % (FrontEnd - BackEnd); // 0 ~ (FrontEnd - BackEnd)
30    Cur2 = (Cur2 - Step) % (FrontEnd - BackEnd); // (BackEnd - FrontEnd) ~ 0
31    translatePic(pics1, Cur1);
32    translatePic(pics2, Cur2);
33  }, ScrollTimerInterval);
34});