大家肯定见过某些网站一个炫酷的页面，就是图片轮播，也就是我们常说的幻灯片播放。对于初学者来说，可能会有点头疼，没关系，小李在这给大家献上自己刚刚写好的关于图片轮播的代码。

以下功能的实现用了jQuery，大家可以去网上找一下关于jQuery的资源下载使用。

 

  • index.html
 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>幻灯片文档</title>
 6     <link href="_css/slide.css" type="text/css" rel="stylesheet" />
 7     <script src="_js/jquery.min.js" type="text/javascript"></script>
 8     <script src="_js/slide.js" type="text/javascript"></script>
 9 </head>
10 
11 <body>
12     <h1>幻灯片设计</h1>
13     <!-- html页面通过li标签添加播放图片 -->
14     <div class="slider-container">
15         <ul id="slider" class="slider-wrapper">
16             <li class="slide-first" >
17                 <img src="_images/p1.jpg" alt="雪山天池" /> 
18                 <div class="caption">
19                     <h3 class="caption-title"><a href="#">雪山天池</a></h3>
20                 </div>
21             </li>
22             <li>
23                 <img src="_images/p2.jpg" alt="未来之路" />
24                 <div class="caption">
25                     <h3 class="caption-title"><a href="#">未来之路</a></h3>
26                 </div>
27             </li>
28             <li>
29                 <img src="_images/p3.jpg" alt="独立寒秋" />
30                 <div class="caption">
31                     <h3 class="caption-title"><a href="#">独立寒秋</a></h3>
32                 </div>
33             </li>
34             <li>
35                 <img src="_images/p4.jpg" alt="高山流水" />
36                 <div class="caption">
37                     <h3 class="caption-title"><a href="#">高山流水</a></h3>
38                 </div>
39             </li>
40             <li>
41                 <img src="_images/p5.jpg" alt="天堑变通途" />
42                 <div class="caption">
43                     <h3 class="caption-title"><a href="#">天堑变通途</a></h3>
44                 </div>
45             </li>
46              <li>
47                 <img src="_images/p6.jpg" alt="远古的呼唤" />
48                 <div class="caption">
49                     <h3 class="caption-title"><a href="#">远古的呼唤</a></h3>
50                 </div>
51             </li>
52              <li>
53                 <img src="_images/p7.jpg" alt="欲与天公试比高" />
54                 <div class="caption">
55                     <h3 class="caption-title"><a href="#">欲与天公试比高</a></h3>
56                 </div>
57             </li>            
58              <li>
59                 <img src="_images/p8.jpg" alt="人间仙境，室外桃园" />
60                 <div class="caption">
61                     <h3 class="caption-title"><a href="#">雪山天池</a></h3>
62                 </div>
63             </li>
64             <li>
65                 <img src="_images/p9.jpg" alt="山不转水转" />
66                 <div class="caption">
67                     <h3 class="caption-title"><a href="http://www.ldu.edu.cn/">山不转水转</a></h3>
68                 </div>
69             </li>         
70         </ul>
71         <ul id="slider-controls" class="slider-controls"></ul>
72         
73     </div><!-- end of slider-container -->
74     <p>适用浏览器：Firefox、Chrome、Opera、Safari，不支持IE8以下浏览器</p>
75 </body>
76 </html>

 

  • slide.css
  1 @charset "utf-8";
  2 
  3 
  4 /* 整体设置 */
  5 html {
  6     margin:0px;
  7     padding:0px;
  8 }
  9 body {
 10     background:#FF9;
 11     font-size:62.5%;
 12 }
 13 
 14 /* 页面标题 */
 15 h1 {
 16     font-family:"隶书","宋体","Times New Roman", Times, serif;
 17     font-size:5em;
 18     text-align:center;
 19     color:red;
 20     margin:10px auto;
 21 }
 22 
 23 /* 图片容器的样式定义 */
 24 .slider-container {
 25     margin:0px auto;
 26     background:#FFF;
 27     width:800px;
 28 }
 29 
 30 /* 图片列表的样式定义 */
 31 ul {
 32     list-style-type:none;
 33 }
 34 .slider-wrapper {
 35     margin:0px;
 36     padding:0px;
 37     position:relative;
 38     height:450px;
 39     width:100%;        
 40     border:5px solid  #69F;
 41     overflow:hidden;
 42     z-index:80;
 43     box-shadow:8px 8px 4px #999999;
 44 }
 45 .slider-wrapper li {
 46     display:none;
 47 }
 48 li.slide-first {
 49     display:block;
 50 }
 51 .slider-wrapper li img {
 52     position:absolute;
 53     top:0px;
 54     left:0px;
 55     max-width:100%;
 56     height: auto;
 57 }
 58 
 59 /* 图片标题的样式定义 */
 60 .caption {
 61     position:absolute;
 62     left:0px;
 63     bottom:0px;
 64     width:100%;
 65     padding 10px;
 66     background:rgba(0,0,0,0.6);
 67     transform:translateY(100%);
 68     -ms-transform:translateY(100%);     /* IE 9 */
 69     -moz-transform:translateY(100%);     /* Firefox */
 70     -webkit-transform:translateY(100%); /* Safari 和 Chrome */
 71     -o-transform:translateY(100%);     /* Opera */
 72 }
 73 .slider-wrapper li:hover .caption {
 74     transform:translateY(0%);
 75     -ms-transform:translateY(0%);     /* IE 9 */
 76     -moz-transform:translateY(0%);     /* Firefox */
 77     -webkit-transform:translateY(0%); /* Safari 和 Chrome */
 78     -o-transform:translateY(0%);     /* Opera */    
 79     transition:all 0.3s ease-in;
 80     -ms-transition:all 0.3s ease-in; /* IE 9 */
 81     -moz-transition:all 0.3s ease-in; /* Firefox */
 82     -webkit-transition:all 0.3s ease-in; /* Safari 和 Chrome */
 83     -o-transition:all 0.3s ease-in; /* Opera */    
 84 }
 85 .caption-title {
 86     font-size:1.6em;
 87     color:#6FF;
 88     font-weight:700;
 89     line-height:2em;
 90 }
 91 
 92 .caption-title a {
 93     color:#FFF;
 94     font-size:2em;
 95     text-decoration:none;
 96 
 97 }
 98 .caption-title a:hover {
 99     background:red;
100 
101 }
102 .caption-title a:active {
103     background:blue;
104 }
105 
106 /* 提示信息 */
107 p {
108     color:black;
109     font-size:2em;
110     text-align:center;
111     margin:50px 0;
112     line-height:2em;
113     margin:20px auto;
114 }
115 
116 /* 作者按钮 */
117 .author a {
118     font-family:"宋体";
119     color:white;
120     text-decoration:none;
121     font-size:2em;
122     border-radius:10px;
123     padding:5px 7px;
124     background:linear-gradient(#33C,#6CC);
125 }
126 .author a:hover {
127     background:linear-gradient(#FCF,#000);
128 }
129 /* 控制按钮 */
130 .slider-controls {
131     text-align: center;
132     margin-top: 15px;
133 }
134 .slider-controls li {
135     background:#FC6;
136     /*border-radius: 50%;*/
137     display:inline-block;
138     height: 12px;
139     width: 12px;
140     margin: 0px 4px;
141     cursor: pointer;
142 }
143 .slider-controls li.active {
144     background: red;    
145 }
146

 

  • slide.js
 1 /**
 2  * 幻灯片JS脚本
 3  */
 4 $(function() {
 5     var SliderModule = (function() {
 6         var pb = {};
 7         pb.el = $('#slider');  //el表达式
 8         pb.items = {
 9             panel: pb.el.find('li')  // 获得li集合
10         }
11 
12         // 变量
13         var SliderInterval,
14             currentSlider = 0,  //当前幻灯片
15             nextSlider = 1,     //下一张
16             lengthSlider = pb.items.panel.length;  // 幻灯片集合长度
17 
18         // 初始化
19         pb.init = function(settings) {
20             this.settings = settings || {duration: 8000} 
21             var output = '';  // 输出的html语言
22 
23             // 初始化
24             SliderInit();
25 
26             for(var i = 0; i < lengthSlider; i++) {
27                 if (i == 0) {
28                     output += '<li class="active"></li>'; 
29                 } else {
30                     output += '<li></li>';
31                 }
32             }
33 
34             // 单击按钮时切换图片
35             $('#slider-controls').html(output).on('click', 'li', function (e){
36                 var $this = $(this);
37                 if (currentSlider !== $this.index()) {
38                     changePanel($this.index());
39                 };
40             });
41         }
42 
43         // 初始化方法
44         var SliderInit = function() {
45             SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
46         }
47 
48         pb.startSlider = function() {
49             var panels = pb.items.panel,
50                 controls = $('#slider-controls li');
51 
52             if (nextSlider >= lengthSlider) {
53                 nextSlider = 0;
54                 currentSlider = lengthSlider-1;
55             }
56 
57             // 淡出淡入效果
58             controls.removeClass('active').eq(nextSlider).addClass('active');
59             panels.eq(currentSlider).fadeOut('slow');
60             panels.eq(nextSlider).fadeIn('slow');
61 
62             // 设置当前幻灯片
63             currentSlider = nextSlider;
64             nextSlider += 1; 
65         }
66 
67         // 自动切换幻灯片
68         var changePanel = function(id) {
69             clearInterval(SliderInterval);
70             var panels = pb.items.panel,
71                 controls = $('#slider-controls li');
72 
73             // 幻灯片头尾
74             if (id >= lengthSlider) {
75                 id = 0;
76             } else if (id < 0) {
77                 id = lengthSlider-1;
78             }
79 
80             // 幻灯片淡出淡入
81             controls.removeClass('active').eq(id).addClass('active');
82             panels.eq(currentSlider).fadeOut('slow');
83             panels.eq(id).fadeIn('slow');
84 
85             // 当前幻灯片和下一张
86             currentSlider = id;
87             nextSlider = id+1;
88 
89             //重新初始化
90             SliderInit();
91         }
92 
93 
94         return pb;
95     }());
96     // 图片切换速度 4000毫秒
97     SliderModule.init({duration: 4000});
98 });

 

欢迎各位大神批评指正，相互提高！

 

版权所有，允许转载，转载请注明出处，侵权必究！