JS+html--实现图⽚轮播
⼤家肯定见过某些⽹站⼀个炫酷的页⾯，就是图⽚轮播，也就是我们常说的幻灯⽚播放。对于初学者来说，可能会有点头疼，没关系，⼩李在这给⼤家献上⾃⼰刚刚写好的关于图⽚轮播的代码。
以下功能的实现⽤了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="www.ldu.edu/">⼭不转⽔转</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/* 整体设置 */
5html {
6    margin:0px;
7    padding:0px;
8 }
9body {
10    background:#FF9;
11    font-size:62.5%;
12 }
13
14/* 页⾯标题 */
15h1 {
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/* 图⽚列表的样式定义 */
31ul {
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 }
48li.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);jquery在线图片
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/* 提⽰信息 */
107p {
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() {
5var SliderModule = (function() {
6var pb = {};
7        pb.el = $('#slider');  //el表达式
8        pb.items = {
9            panel: pb.el.find('li')  // 获得li集合
10        }
11
12// 变量
13var SliderInterval,
14            currentSlider = 0,  //当前幻灯⽚
15            nextSlider = 1,    //下⼀张
16            lengthSlider = pb.items.panel.length;  // 幻灯⽚集合长度
17
18// 初始化
19        pb.init = function(settings) {
20this.settings = settings || {duration: 8000}
21var output = '';  // 输出的html语⾔
22
23// 初始化
24            SliderInit();
25
26for(var i = 0; i < lengthSlider; i++) {
27if (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){
36var $this = $(this);
37if (currentSlider !== $this.index()) {
38                    changePanel($this.index());
39                };
40            });
41        }
42
43// 初始化⽅法
44var SliderInit = function() {
45            SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
46        }
47
48        pb.startSlider = function() {
49var panels = pb.items.panel,
50                controls = $('#slider-controls li');
51
52if (nextSlider >= lengthSlider) {
53                nextSlider = 0;
54                currentSlider = lengthSlider-1;
55            }
56
57// 淡出淡⼊效果
58            veClass('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// ⾃动切换幻灯⽚
68var changePanel = function(id) {
69            clearInterval(SliderInterval);
70var panels = pb.items.panel,
71                controls = $('#slider-controls li');
72
73// 幻灯⽚头尾
74if (id >= lengthSlider) {
75                id = 0;
76            } else if (id < 0) {
77                id = lengthSlider-1;
78            }
79
80// 幻灯⽚淡出淡⼊
81            veClass('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
94return pb;
95    }());
96// 图⽚切换速度 4000毫秒
97    SliderModule.init({duration: 4000});
98 });
欢迎各位⼤神批评指正，相互提⾼！
版权所有，允许转载，转载请注明出处，侵权必究！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。