一.完整源码的下载地址
CSDN
https://download.csdn.net/download/William_fang/75216805
牛客网
https://git.nowcoder.com/90589443/sameless-swiper
二.无缝轮播图的代码思路
①通过DOM对元素id进行获取,得到各自的变量oList、oWrap。
②利用innerHTML的方式进行li元素的复制。
③定义变量,设置初始值。
④利用定时器让多张图片进行位移,从而不断改变left的值。
⑤由于定时器的代码会进行重复的利用,所以进行了相应的函数封装。
⑥结合已有的代码,进行逻辑处理,并且让相应的符号拥有不一样的功能。
三.功能设计
①当鼠标点击图片,可以显示相应的名称。
②轮播图自动地向左移动,当鼠标移到轮播图上的时候,轮播图就会停止。当鼠标移开的时候,轮播图就会开始。
③可以利用相应的符号控制轮播图的位移方向,可以向左,也可以向右。
四.代码
HTML、JavaScript部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无缝轮播</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div