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="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 });

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

转载于:https://www.cnblogs.com/xiaoli-home/p/6749662.html

JS+html--实现图片轮播相关推荐

js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效
特效描述:html5 tweenmax.js 打碎玻璃图片轮播切换特效.html5碎玻璃图片切换特效,tweenmax.js实列代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 co ...
html js简单实现图片轮播功能
本章记录简单的图片轮播功能,需要html.js和css共同实现1.html文件 <!DOCTYPE html> <html><head><meta chars ...
js数组实现图片轮播
为什么80%的码农都做不了架构师?>>> 图片轮播的办法有多种,在这里介绍一种简单的:js数组实现. 首先将图片路径存储在数组中,然后再调用setInterval函数来依次轮播 ...
html+css+js实现的图片轮播图下方配文字可变图片可点击
js代码 <script>// 首先获取相关DOMvar box =document.getElementById('box');var img =document.getElementB ...
自动图片轮播php源码,js实现自动图片轮播代码
本文实例为大家分享了轮播的具体代码,自动轮播,居中显示,供大家参考,具体内容如下 #div1{ width: 192px; height: 120px; border: 1px solid gray; ...
js原生写图片轮播和切换
网上有很多轮播图的写法,有一些我觉得写的太过繁琐可读性差.所以我自己写了两个js块.第一个是轮播图写法,第二个是通过点击左右箭头切换图片.这里主要是展示js代码,省略了样式. 1.js原生写轮播图 & ...
html+css+js简单实现图片轮播效果
<html> <head> <style type="text/css"> *{background-color:green;} #lunbo{ ...
旋转图片轮播html,js实现旋转图片轮播
2018-08-18 话不多说,直接上代码 html: css: * { margin: 0; padding: 0; } body { background: #000; overflow: hid ...
简单html图片轮播_web前端入门到实战：简单的图片轮播
效果: 功能: 1.左右箭头切换 2.状态控制点切换 3.鼠标悬念 4.自动轮播 HTML: <div class="zh-carousel"><div clas ...
jQuery 插件 jSlider 图片轮播
jSlider是一个非常好的图片轮播插件. 有导航箭头,可以自动播放,可以循环播放. 官方网站 https://github.com/copthuy/jSlider <!DOCTYPE html ...

JS+html--实现图片轮播

JS+html--实现图片轮播相关推荐

最新文章

热门文章