html+css手搓轮播图(附源码)

yycvip · 发表于 2024-11-23 16:12:05

预览效果

源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#slideshow {
width: 800px;
height: 350px;
margin: 0 auto;
/*设置在页面水平居中*/
overflow: hidden;
position: relative;
}
#slideshow img {
width: 800px;
position: absolute;
/*图片采取绝对定位，均位于左上角，重叠在一起*/
top: 0;
left: 0;
opacity: 0;
/*初始不透明度为0，图片都看不见*/
transition: opacity 1s linear;
/*--重点--定义一个关于透明度的transition*/
}
#slideshow img.active {
opacity: 1;
/*有active类的图片不透明度为1，即显示图片*/
}
/*-- 设置页码的样式 --*/
#slideshow div {
width: 100%;
position: absolute;
bottom: 10px;
text-align: center;
}
#slideshow span {
display: inline-block;
width: 25px;
line-height: 25px;
/*当只有一行文本时height等于line-height*/
border-radius: 25px;
/*设置页码为圆形*/
margin: 0 15px;
background: white;
font-size: 16px;
}
#slideshow span.active {
color: white;
background: #FFDD55;
}
/*-- 设置图片描述文本的样式 --*/
#slideshow p {
position: absolute;
top: 30px;
left: -400px;
/*相对于轮播图左侧左移400px*/
line-height: 30px;
padding: 5px 30px;
font-size: 20px;
color: white;
background-color: rgba(100, 100, 100, 0.6);
/*用rgba设置一个带透明度的背景颜色*/
opacity: 0;
transition: all 0.5s;
}
#slideshow p.active {
left: 0;
opacity: 1;
}
</style>
</head>
<body>
<div id="slideshow">
<img class="active" src="https://images.unsplash.com/photo-1730722005859-f93a79460bae?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<img src="https://image2.sina.com.cn/dongman/pic/chshidzrcji/U1595P55T4D115697F50DT20070406083109.jpeg" />
<img src="http://t1.mmonly.cc/uploads/tu/201602/198/qh1spjs3guk.jpg" />
<div>
<span class="active">1</span>
<span>2</span>
<span>3</span>
</div>
<p class="active">这是第一幅图片哈哈哈</p>
<p>这是第二幅图片咩</p>
<p>到第三幅了！</p>
</div>
<script>
//---------主角：轮播图函数-------------
function slideshow() {
var slideshow = document.getElementById("slideshow"),
imgs = slideshow.getElementsByTagName("img"), //得到图片们
pages = slideshow.getElementsByTagName("span"), //得到页码们
descrips = slideshow.getElementsByTagName("p"), //得到描述们
current = 0; //current为当前活跃的图片编号
function slideOff() {
imgs[current].className = ""; //图片淡出
pages[current].className = "";
descrips[current].className = "";
}
function slideOn() {
imgs[current].className = "active"; //图片淡入
pages[current].className = "active";
descrips[current].className = "active";
}
function changeSlide() { //切换图片的函数
slideOff();
current++; //自增1
if (current >= 3) current = 0;
slideOn();
}
//每2s调用changeSlide函数进行图片轮播
var slideon = setInterval(changeSlide, 2000);
slideshow.onmouseover = function () {
clearInterval(slideon); //当鼠标移入时清除轮播事件
}
slideshow.onmouseout = function () {
slideon = setInterval(changeSlide, 2000); //当鼠标移出时重新开始轮播事件
}
for (var i = 0; i < pages.length; i++) { //定义鼠标移入和移出页码事件
pages[i].onmouseover = function () {
slideOff(); //图片淡出
current = this.innerHTML - 1; //得到鼠标停留的页码对应的current
slideOn(); //图片淡出
}
}
}
slideshow();
</script>
</body>
</html>

复制代码

源码解释

这段代码是一个简单的图片轮播图的HTML页面，它使用了HTML、CSS和JavaScript来实现图片的自动轮播和手动切换功能。下面是代码的详细解释：

HTML部分：

<div id="slideshow">：定义了轮播图的容器。
<img>标签：包含了三张图片，其中第一张图片被设置为初始显示（class="active"）。
<div>和<span>标签：用于显示页码，其中第一个页码被设置为初始活动状态（class="active"）。
<p>标签：用于显示每张图片的描述，其中第一个描述被设置为初始活动状态（class="active"）。
CSS部分：

设置了页面的基本样式，如padding和margin都被设置为0。
#slideshow：定义了轮播图容器的样式，包括宽度、高度、溢出隐藏和相对定位。
#slideshow img：设置了图片的样式，包括宽度、绝对定位、初始透明度和过渡效果。
#slideshow img.active：当图片具有active类时，透明度变为1，使其可见。
#slideshow div和#slideshow span：定义了页码的样式，包括宽度、位置、文本对齐和圆形外观。
#slideshow span.active：当页码具有active类时，背景颜色改变。
#slideshow p：定义了图片描述的样式，包括位置、行高、填充、字体大小和背景颜色。
#slideshow p.active：当描述具有active类时，位置和透明度改变，使其可见。
JavaScript部分：

定义了一个slideshow函数，用于控制图片的轮播。
slideOff函数：用于将当前图片、页码和描述的样式设置为非活动状态。
slideOn函数：用于将当前图片、页码和描述的样式设置为活动状态。
changeSlide函数：用于切换到下一张图片，如果到达最后一张图片，则回到第一张。
设置了一个定时器setInterval，每2秒调用一次changeSlide函数。
当鼠标移入轮播图时，清除定时器，停止自动轮播；鼠标移出时，重新开始定时器。
为每个页码绑定了鼠标移入事件，当鼠标移入某个页码时，切换到对应的图片。
这段代码实现了一个基本的图片轮播功能，包括自动轮播、鼠标悬停暂停、手动切换图片和显示图片描述。

		自动登录	找回密码
密码			立即注册