【笔记——web】幻灯片效果实现

最新推荐文章于 2025-03-13 10:14:01 发布

转载最新推荐文章于 2025-03-13 10:14:01 发布 · 241 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kirno/p/4080496.html

文章标签：

#javascript #ViewUI

本文提供了一个简单易懂的网页幻灯片制作方法，包括HTML、CSS和JavaScript代码，详细介绍了如何创建动态切换的幻灯片效果，并通过实例演示了实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页上的幻灯片，记录一下，早就想学了，提供一个最简单的幻灯片制作方法，纯手工制品

先放效果

以下是现实说明：

一、以下是html代码，ul里面的是图上橙色、灰色的按钮，Img就是那些用于幻灯显示的图片

 1   <div id="pic">
 2     <div id="button-back">
 3       <ul>
 4         <li class="btnb" onClick="cli(1)" ></li>
 5         <li class="btn" onClick="cli(2)" ></li>       
 6           <li class="btn" onClick="cli(3)" ></li>
 7       </ul>
 8     </div>
 9     <img id="img-one" src="images/index/01.gif" width="1350" height="449"/>
10     <img id="img-two" src="images/index/02.gif" width="1350" height="449" />   
11     <img id="img-three" src="images/index/03.gif" width="1350" height="449" />
12     </div>

二、css代码，按钮和图片都要使用绝对布局让他浮起来

 1 #pic{
 2     background-image: url(../images/02.gif);
 3     width: 1349px;
 4     height: 466px;
 5     margin: auto;
 6 }
 7 
 8 #pic img{
 9     position:absolute;
10 }
11 
12 #button-back{
13     width:103px;
14     height:25px;
15     position:absolute;
16     z-index:1;
17     margin-top:412px;
18     margin-left:637px;
19     background-image:url(../images/index/12.gif);
20 }
21 #button-back ul{
22     margin-left:9px;
23 
24 }
25 #button-back ul li{
26     width:18px;
27     height:18px;
28     margin-left:8px;
29     margin-top:4px;
30 }
31 
32 .btn{
33     background-image:url(../images/index/b.gif);
34 }
35 
36 .btnb{
37     background-image:url(../images/index/bb.gif);
38 }

三、js代码，大概意思是使用setInterval()定时器来重复调用changeFlage()方法，changeFlage()是用来改变标志位的，然后通过调用changeImg方法根据标志位flage来改变图片，改变效果通过jquery实现，同样鼠标点击按钮也是改变标志位，然后改变图片

 1 var img = document.getElementById("pic").getElementsByTagName("img");
 2     var lis = document.getElementById("button-back").getElementsByTagName("li");
 3     
 4     var flage = 2;
 5     
 6     //速度设置
 7     var fast = 1000;
 8     var slow = 1200;
 9     var time = 4000;
10     
11     //进行一次变换
12     img[0].hidden = false;
13     img[1].hidden = true;
14     img[2].hidden = true;
15     
16     //周期调用改变标志函数
17     setInterval("changeFlage()",time);
18     
19     //改变标志
20     function changeFlage(){
21         chagneImg();
22         if(flage >= 3){
23             flage = 1;
24         }else{
25             flage ++;
26         }
27     }
28     
29     //待测试，用于随机幻灯效果
30     function tx(img1,img2,img3){
31         var ran = Math.ceil(1);
32         if(ran == 0){
33             img1.fadeIn(fast);
34             img2.fadeOut(fast);
35             img3.fadeOut(fast);
36         }else if(ran == 1){
37             img1.slideUp(fast);
38             img2.slideDown(fast);
39             img3.slideDown(fast);
40         }
41     }
42     
43     //改变图片
44     function chagneImg(){
45         switch(flage){
46             case 1:
47                 /*img[0].hidden = false;
48                 img[1].hidden = true;
49                 img[2].hidden = true;*/
50 
51                 $("#img-one").fadeIn(fast);
52                 $("#img-two").fadeOut(slow);
53                 $("#img-three").fadeOut(slow);
54 
55                 /*tx($("#img-one"),$("#img-two"),$("#img-three"));                */
56                 lis[0].className = "btnb";
57                 lis[1].className = "btn";
58                 lis[2].className = "btn";
59                 break;
60             case 2:
61                 /*img[0].hidden = true;
62                 img[1].hidden = false;
63                 img[2].hidden = true;*/
64                 
65                 $("#img-one").fadeOut(slow);
66                 $("#img-two").fadeIn(fast);
67                 $("#img-three").fadeOut(slow);
68                 
69                 /*tx($("#img-two"),$("#img-one"),$("#img-three"));*/
70                 lis[0].className = "btn";
71                 lis[1].className = "btnb";
72                 lis[2].className = "btn";
73                 break;
74             case 3:
75                 /*img[0].hidden = true;
76                 img[1].hidden = true;
77                 img[2].hidden = false;*/
78                 
79                 $("#img-one").fadeOut(slow);
80                 $("#img-two").fadeOut(slow);
81                 $("#img-three").fadeIn(fast);
82                 
83                 /*tx($("#img-three"),$("#img-two"),$("#img-one"));*/
84                 lis[0].className = "btn";
85                 lis[1].className = "btn";
86                 lis[2].className = "btnb";                
87                 break;
88         }
89     }
90     
91     //点击按钮
92     function cli(n){
93         flage = n;
94         chagneImg();
95     }