Use css3 animation to achieve image switching effect. The principle is to change the left value. There is only the simplest auto-play function, which stops for a short time after switching and clones the first picture through the last position to achieve seamless switching.
html structure
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pic"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/DSC01627.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="pic1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/DSC01628.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="pic2"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/DSC02637.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="pic3"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:;"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/DSC01627.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="pic1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 克隆第一张 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
css style
<span style="color: #800000;"> *</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;"> ul</span>{<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;"> #container</span>{<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">隐藏溢出的图片</span><span style="color: #008000;">*/</span> }<span style="color: #800000;"> .pic</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">1600px</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">4张图的宽度</span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">基于父容器进行定位</span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> animation-name</span>:<span style="color: #0000ff;"> focusmap</span>;<span style="color: #ff0000;"> animation-duration</span>:<span style="color: #0000ff;"> 12s</span>;<span style="color: #ff0000;"> animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;//<span style="color: #008000;">动画调用可以简写</span> }<span style="color: #800000;"> @keyframes focusmap </span>{<span style="color: #ff0000;"> 0%,30%{ left</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;"> 35%,65%</span>{<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> -400px</span>; }<span style="color: #800000;"> 70%,99%</span>{<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> -800px</span>; }<span style="color: #800000;"> 100%</span>{<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> -1200px</span>; }<span style="color: #800000;"> } .pic li</span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> #5dd94e</span>; }<span style="color: #800000;"> .pic li img </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 200px</span>; }