SlideTouchandmousewithPureJavascript

1. 首先，需要在HTML中添加一个容器，里面包含图片和相关控件，如下所示：

<div class="slider"> <ul class="slides"> <li> <img src="https://placehold.it/800x300"> </li> <li> <img src="https://placehold.it/800x300"> </li> <li> <img src="https://placehold.it/800x300"> </li> </ul> <div class="slider-controls"> <a href="#" class="prev"><</a> <a href="#" class="next">></a> </div> </div>

2. 接下来，需要使用CSS将图片和控件进行布局和样式调整，如下所示：

.slider { position: relative; overflow: hidden; width: 800px; height: 300px; }

.slides { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; }

.slides li { flex: 0 0 100%; position: relative; }

.slides img { width: 100%; height: 100%; object-fit: cover; }

.slider-controls { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }

.slider-controls a { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; margin: 0 5px; font-size: 20px; color: #000; }

3. 最后，使用纯Javascript编写滑动和点击控件的功能代码，如下所示：

var slider = document