如何原生手写简易的前端 “轮播图”

代码小白鸽

于 2024-04-21 12:55:42 发布

阅读量527

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端小白练手案例文章标签： javascript 前端贴图

本文链接：https://blog.csdn.net/qq_46206320/article/details/138013584

新手也能写的轮播图

轮播图

轮播图

轮播图演示：

在这里插入图片描述

效果分析

1、每过一段时间，自动切换当前的照片
2、鼠标点击对应的小圆点，切换对应的照片
3、鼠标悬浮在照片上，停止轮播切换

代码实现

1、前端页面布局（Html+Css）

Html页面布局

<html>
  <head>
	<meta id="v5" charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
  
	<title id="v6">轮播图</title> 
  </head> 
  
  <body id="v4"> 
	<div class="slider">
	  <div class="slider-wrap">
		<img src="" alt="这是一张图片"/>
	  </div>
	  <ul>
		<li class