JS+html--实现图片轮播_weixin_30418341的博客-程序员宝宝

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

以下功能的实现用了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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30418341/article/details/98258459

智能推荐

(模板题)How Many Tables_极客字节的博客-程序员宝宝

HDU-How Many Tables-1213问题描述:给n个人分配桌子,要求在一个桌子上只能有认识的人,然后给出了m中关系,求需要多少张桌子;并查集:假设刚开始需要cnt=n张桌子,没合并一次,cnt减一,最后cnt的值就是答案;初始化+查找+合并;#include&amp;lt;iostream&amp;gt;using namespace std;const int maxn=1...

利用Python学习数据挖掘【0】_夜空骑士的博客-程序员宝宝

相信看到这篇文章的你一定是对数据分析,数据挖掘有兴趣,或者想从事和方面。本文不再累述python对数据分析的重要,数据分析这门的由来之类的。在这里,我单刀直入,已我学习数据挖掘3年来的经历告诉大家怎么去学,以让大家少走弯路。纯个人见解,如有不对,还请各位留言指教。话不多说,直接放图。一  学好工具python语言推荐看廖雪峰的python3教程。数据分析python基础...

linux下内联函数实现浅析_caoyan_12727的博客-程序员宝宝

首先我们来看看内联函数的相关解释:1.引入目的:为了解决程序中函数调用的效率问题2.  优点:节省了函数调用时间,也就是说没有call指令(也就没有相关参数的压栈(push),跳转(jmp),返回(ret), 参数出栈(add $0x10,%esp)等等一系类的操作,可谓是节省了不少功夫),以空间换时间.3. 缺点:在调用出的代码量会增加很多。在编译器没有将相关函数处理成内联函数时(为

MacBook Air发热严重,如何自检_ITACHI.鼬的博客-程序员宝宝_mac发热

温度对于电脑来说很重要,温度高了会导致电脑运行缓慢,死机等情况。特别是在炎热的夏天,你的电脑的温度正常么,是否能够正常运行呢?如果你的MacBook Air发热比较严重的话可以来看下这篇文章,macz小编为您提供了5个技巧和窍门帮您进行修复。为什么我的MacBook Air会这么热?很多问题都可能导致MacBook Air发热,从堆积的灰尘到大量浏览器选项卡。这些是每台电脑都需要应对的问题,但是MacBook似乎比大多数机器要严重很多。从2019年开始,MacBook Air似乎特别容易出现过热问题,

详细介绍什么是卡片式设计用户界面_hbblzjy的博客-程序员宝宝

作者:Nick Babich日期:2016/10/11原文链接:https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/网页和手机应用正彻底地从页面转向个性化体验,这些新的体验建立在许多单个内容的聚合上,而这些内容目前以卡的形式来呈现。卡片式的交互方式正在广泛传播,无论是新闻网站或是外卖应用,你都可

Inception-Resnet-V2 Pre-train 总结_RainbowSun1102的博客-程序员宝宝

工作之后有点小忙碌,一直都没来得及更新博客。这是工作之后的第一篇博客。Mark一下自己,快要一个月了,快要发工资了,R神很高兴啊。今天在工作培训中,需要运用InceptionV4-Resnet-V2进行图片的分类。由于InceptionV4的网络很深,所以直接训练是很不理智的,于是下载了Pre-train的模型。网络文章地址:http://arxiv.org/abs/1602.0726...

随便推点

Jackson-databind 反序列化漏洞(CVE-2020-36179 ~ CVE-2020-36189)_ℳ₯㎕ddzོꦿ࿐的博客-程序员宝宝_jackson反序列化漏洞

2021年1月7日,jackson-databind官方发布安全通告,披露jackson-databind &lt; 2.9.10.8存在多个反序列化远程代码执行漏洞(CVE-2020-36179 ~ CVE-2020-36189),利用该漏洞,攻击者可远程执行代码,控制服务器。2020年12月17日,jackson-databind官方发布安全通告,披露jackson-databind &lt; 2.9.10.8存在反序列化远程代码执行漏洞(CVE-2020-35490/CVE-2020-35491).

暑假很忙_iteye_11687的博客-程序员宝宝

我是非计算机专业的计算机爱好者,我为自己的2009年暑假安排了很多事情:1.进一步提高C语言。2.学习Java。3.学习Jsp。4.准备程序员考试。5。学习C++。6.学习HTML。7.学习数据结构。8.学习SQL Server。9。学习Java Scprit。10.学习Photoshop。我肯定很充实,因为Ihave a dream !...

<java API源码初体验>4---collection集合之HashSet原理分析_Fuego801的博客-程序员宝宝

java的HashSet是由HashMap的key组成的,用的增删改查的方法均基于HashMap的key。根据HashMap保证了key的唯一性。 public boolean add(E e) { return map.put(e, PRESENT)==null; }它的add()方法,用的就是HashMap里面的put()方法。 若map中已存在e,则返回false;若

C#(Winform) 当前线程不在单线程单元中,因此无法实例化 ActiveX 控件_EricBBB的博客-程序员宝宝

解决方案:1、在主线程中实例化此ActiveX控件2、将创建此Active控件的线程设定为单线程。      Thread.ApartmentState 获取或设置此线程的单元状态。            newThread= new Thread(MainFormMessageThread);            newThread.SetApartmentState(S...

jquery 简单的进度条实现代码_chinajobs的博客-程序员宝宝_jquery进度条代码

效果图需要用到的图片:背景图片:进度显示图片:网页结构:复制代码 代码如下: css代码: 代码 复制代码 代码如下:#center{ margin:50px auto; width:400px; } #loading{ width:397px; height:49px; back

windows10安装db2数据库_xinlianluohan的博客-程序员宝宝_win10安装db2

1.下载链接:https://pan.baidu.com/s/19RjLL1b1HWsb5PlUFrJG-g提取码:0e4c2. 解压解压后,如下:3. 安装解压后,自动弹出如下窗口,或者双击打开 setup.exe:选择安装产品4.测试安装是否成功因为安装以上安装成功后,默认数据库实例为:DB2,默认数据库为:SAMPLE。那么我们连上SAMPLE就表示安装成功了。用管理员身份,打开:输入connect to sample回车,连接到SAMPLE 数...

推荐文章

热门文章

相关标签