HTML+CSS轮播图

myzbx 2024-12-05 14:47 47 浏览

整体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;
			padding: 0;}
#box {
	width: 100%;
	height: 502px;
	overflow: hidden;/*溢出的部分:隐藏*/
}

#box .menu {
	width: 607%;
	position: relative;
	margin-left: -40px;/*左外边距*/
	bottom: 0px;/*低边距离*/

}

#box .menu ul li {
	float: left;/*浮动:左,就是要把图片往左浮动*/
	list-style: none;
}




		</style>
	</head>
	<body>
		<div id="box"><!--最外的大盒子-->
			<div class="menu"><!--这里是写入我们要播放的图片-->
				<ul><!--无序列表-->
					<li><img src="image/01.jpg" width="1546px;" height="500px"></li>
					<li><img src="image/02.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/03.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/04.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/05.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/06.jpg" width="1546px;" height="500px"></li>
				</ul>
			</div>
			
		</div>
		<!--在这里导入javascript文件也就是js代码，如果没有这个就没有动画-->
		<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
		<!--写代码-->
        <script>
//      	function就是函数执行
        	$(function(){
        		//一般获取元素用var,从第一张图片开始
        		var _index=0,  
//        		 窗口宽度,就是把所有图片放在水平线上的总宽度
        		window_width=1546, 
        		//时间循环
        		timer=null,  
        		//图片内容一共六张
        		images_count=6;
        		//获取下一个
        		function nextPlay(){
        			if(_index>images_count-1){//_index指的是每一张图片
        				_index=0;//从第一张开始
        				              //stop() 停留，animate自定义动画往左运动，
        				$("#box .menu").stop().animate({left:-window_width*_index},500);
        			}else{
        				$("#box .menu").stop().animate({left:-window_width*_index},500);
        			} 
        			//每一个图片加一就是自动按顺序出来
        			_index++;
        		}
        		timer=setInterval(nextPlay,2000);
        	})
        </script>
	</body>
</html>

javascript文件也就是js文件：链接：https://pan.baidu.com/s/1_RUihF6SdA4-NJcqHGqm1g

提取码：mnfg

HTML 图像

上一篇：产品经理的技术脑:html是什么意思?
下一篇：HTML表格制作

HTML+CSS轮播图

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」