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

预览效果



源码

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. 
   
4. <head>
   
5.     <meta charset="UTF-8">
   
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
7.     <title>Document</title>
   
8.     <style>
   
9.         * {
   
10.             padding: 0;
    
11.             margin: 0;
    
12.         }
    
13. 
    
14.         #slideshow {
    
15.             width: 800px;
    
16.             height: 350px;
    
17.             margin: 0 auto;
    
18.             /*设置在页面水平居中*/
    
19.             overflow: hidden;
    
20.             position: relative;
    
21.         }
    
22. 
    
23.         #slideshow img {
    
24.             width: 800px;
    
25.             position: absolute;
    
26.             /*图片采取绝对定位，均位于左上角，重叠在一起*/
    
27.             top: 0;
    
28.             left: 0;
    
29.             opacity: 0;
    
30.             /*初始不透明度为0，图片都看不见*/
    
31.             transition: opacity 1s linear;
    
32.             /*--重点--定义一个关于透明度的transition*/
    
33.         }
    
34. 
    
35.         #slideshow img.active {
    
36.             opacity: 1;
    
37.             /*有active类的图片不透明度为1，即显示图片*/
    
38.         }
    
39. 
    
40.         /*-- 设置页码的样式 --*/
    
41.         #slideshow div {
    
42.             width: 100%;
    
43.             position: absolute;
    
44.             bottom: 10px;
    
45.             text-align: center;
    
46.         }
    
47. 
    
48.         #slideshow span {
    
49.             display: inline-block;
    
50.             width: 25px;
    
51.             line-height: 25px;
    
52.             /*当只有一行文本时height等于line-height*/
    
53.             border-radius: 25px;
    
54.             /*设置页码为圆形*/
    
55.             margin: 0 15px;
    
56.             background: white;
    
57.             font-size: 16px;
    
58.         }
    
59. 
    
60.         #slideshow span.active {
    
61.             color: white;
    
62.             background: #FFDD55;
    
63.         }
    
64. 
    
65.         /*-- 设置图片描述文本的样式 --*/
    
66.         #slideshow p {
    
67.             position: absolute;
    
68.             top: 30px;
    
69.             left: -400px;
    
70.             /*相对于轮播图左侧左移400px*/
    
71.             line-height: 30px;
    
72.             padding: 5px 30px;
    
73.             font-size: 20px;
    
74.             color: white;
    
75.             background-color: rgba(100, 100, 100, 0.6);
    
76.             /*用rgba设置一个带透明度的背景颜色*/
    
77.             opacity: 0;
    
78.             transition: all 0.5s;
    
79.         }
    
80. 
    
81.         #slideshow p.active {
    
82.             left: 0;
    
83.             opacity: 1;
    
84.         }
    
85.     </style>
    
86. </head>
    
87. 
    
88. <body>
    
89.     <div id="slideshow">
    
90.         <!-- 插入轮播的图片们 -->
    
91.         <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" />
    
92.         <img src="https://image2.sina.com.cn/dongman/pic/chshidzrcji/U1595P55T4D115697F50DT20070406083109.jpeg" />
    
93.         <img src="http://t1.mmonly.cc/uploads/tu/201602/198/qh1spjs3guk.jpg" />
    
94.         <!-- 插入轮播的页码们 -->
    
95.         <div>
    
96.             <span class="active">1</span>
    
97.             <span>2</span>
    
98.             <span>3</span>
    
99.         </div>
    
100.         <!-- 插入图片的描述们 -->
     
101.         <p class="active">这是第一幅图片哈哈哈</p>
     
102.         <p>这是第二幅图片咩</p>
     
103.         <p>到第三幅了！</p>
     
104.     </div>
     
105. 
     
106.     <script>
     
107.         //---------主角：轮播图函数-------------
     
108.         function slideshow() {
     
109.             var slideshow = document.getElementById("slideshow"),
     
110.                 imgs = slideshow.getElementsByTagName("img"), //得到图片们
     
111.                 pages = slideshow.getElementsByTagName("span"), //得到页码们
     
112.                 descrips = slideshow.getElementsByTagName("p"), //得到描述们
     
113.                 current = 0; //current为当前活跃的图片编号
     
114. 
     
115.             function slideOff() {
     
116.                 imgs[current].className = ""; //图片淡出
     
117.                 pages[current].className = "";
     
118.                 descrips[current].className = "";
     
119.             }
     
120.             function slideOn() {
     
121.                 imgs[current].className = "active"; //图片淡入
     
122.                 pages[current].className = "active";
     
123.                 descrips[current].className = "active";
     
124.             }
     
125. 
     
126.             function changeSlide() { //切换图片的函数
     
127.                 slideOff();
     
128.                 current++; //自增1
     
129.                 if (current >= 3) current = 0;
     
130.                 slideOn();
     
131.             }
     
132. 
     
133.             //每2s调用changeSlide函数进行图片轮播
     
134.             var slideon = setInterval(changeSlide, 2000);
     
135. 
     
136.             slideshow.onmouseover = function () {
     
137.                 clearInterval(slideon); //当鼠标移入时清除轮播事件
     
138.             }
     
139.             slideshow.onmouseout = function () {
     
140.                 slideon = setInterval(changeSlide, 2000); //当鼠标移出时重新开始轮播事件
     
141.             }
     
142. 
     
143.             for (var i = 0; i < pages.length; i++) { //定义鼠标移入和移出页码事件
     
144.                 pages[i].onmouseover = function () {
     
145.                     slideOff(); //图片淡出
     
146.                     current = this.innerHTML - 1; //得到鼠标停留的页码对应的current
     
147.                     slideOn(); //图片淡出
     
148.                 }
     
149.             }
     
150. 
     
151.         }
     
152. 
     
153.         slideshow();
     
154.     </script>
     
155. 
     
156. 
     
157. </body>
     
158. 
     
159. </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函数。
当鼠标移入轮播图时，清除定时器，停止自动轮播；鼠标移出时，重新开始定时器。
为每个页码绑定了鼠标移入事件，当鼠标移入某个页码时，切换到对应的图片。
这段代码实现了一个基本的图片轮播功能，包括自动轮播、鼠标悬停暂停、手动切换图片和显示图片描述。