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

代码小白鸽

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

阅读量388

点赞数 3

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

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

版权

前端小白练手案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何通过HTML和CSS进行页面布局，以及利用JavaScript实现轮播图的功能，包括自动切换、鼠标点击控制和鼠标悬停暂停。代码示例展示了每张图片的加载、轮播时间间隔设置以及鼠标事件处理。

摘要由CSDN通过智能技术生成

新手也能写的轮播图

轮播图

轮播图

轮播图演示：

在这里插入图片描述

效果分析

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="active" data-id="0" onclick="clickLi(this)"></li>
		<li data-id="1" onclick="clickLi(this)"></li>
		<li data-id="2" onclick="clickLi(this)"></li>
	  </ul>
	</div>
  </body>
</html>

CSS 样式

<style>
  *{
 margin:0;
 padding:0;
 }
 body{
 	background-color: black;
 }
 .slider{
  position: relative;
 }
 .slider-wrap img{
  margin:0 auto;
  display:block;
  height: 350px;
}
ul{
   width: 100%;
   position: absolute;
   bottom: 0;
   text-align: center;
}
 li{
   height: 10px;
   width: 10px;
   display: inline-block;
   background-color: black;
   border-radius:50%;
   margin: 5px;
 }
 li:hover{
 	cursor: pointer;
 }
 .active{
 	background-color: white;
 }
</style>

2、逻辑控制（javascript）

  //定义轮播图片资源对象
	  const data=[{
	  src:"http://20479763.s61i.faiusr.com/2/AD0Ik-7hCRACGAAgmZL67AUo2vX26Acw7gU46AI!900x900.jpg.webp"
	  },{
	  src:"http://20479763.s61i.faiusr.com/2/AD0Ik-7hCRACGAAgmsix7AUouJ_44gYw7gU46AI!900x900.jpg.webp"
	  },{
	  	src:"http://20476835.s61i.faiusr.com/4/AD0Io_fhCRAEGAAg1Mmx7AUo__XMlQEw7gU46AI!900x900.png.webp"
	  }];

	  //加载第一张轮播的图片
	  const img=document.querySelector(".slider-wrap img");
	  img.src="http://20479763.s61i.faiusr.com/2/AD0Ik-7hCRACGAAgmZL67AUo2vX26Acw7gU46AI!900x900.jpg.webp";

	  let i=0;

	  //开启轮播
	 
	  let num;
	  num=lunboPlay(img,data,1000);//lunboPlay()轮播播放函数

	 //添加一个鼠标经过轮播图 停止轮播的事件
	 img.onmouseenter=function(){
	 	console.log("鼠标经过，清除轮播");
	 	clearInterval(num);
	 }
     //添加一个鼠标离开轮播图 重新开始轮播的事件  
	 img.onmouseout=function(){
	 	console.log("鼠标划开，开始轮播");
	 	num=lunboPlay(img,data,1000);
	 }
	   //定义一个轮播功能函数
	    /* 参数定义：
	  	 img:图片对象
	  	 data:存储 轮播图片对象的一个数组
	  	 s:轮播图 每几秒跳动的时间
	   */
	  function  lunboPlay(img,data,s){   //img  图片对象
	    num=setInterval(function(){
	    img.src=data[i].src;
	    document.querySelector(".active").className="";
	    const obj=document.querySelector(`ul li:nth-child(${i+1})`).className="active";
	    i++;
	  	if(i>data.length-1){
	  	   i=0;
	  	}
	  	},s);
	  	return num;
	  }
	  //定义li点击事件,点击后对应轮播图显示
	  function clickLi(obj){
	  	clearInterval(num);
	  	i=+obj.dataset.id;
	  	img.src=data[i].src;
	    document.querySelector(".active").className="";
	    obj=document.querySelector(`ul li:nth-child(${i+1})`).className="active";
	  	num=lunboPlay(img,data,1000);
	  }