JS+html--实现图片轮播

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

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

index.html

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>幻灯片文档</title>

     <link href="_css/slide.css" type="text/css" rel="stylesheet" />

     <script src="_js/jquery.min.js" type="text/javascript"></script>

     <script src="_js/slide.js" type="text/javascript"></script>

 </head>

 <body>

     <h1>幻灯片设计</h1>

     <!-- html页面通过li标签添加播放图片 -->

     <div class="slider-container">

         <ul id="slider" class="slider-wrapper">

             <li class="slide-first" >

                 <img src="_images/p1.jpg" alt="雪山天池" />

                 <div class="caption">

                     <h3 class="caption-title"><a href="#">雪山天池</a></h3>

                 </div>

             </li>

             <li>

                 <img src="_images/p2.jpg" alt="未来之路" />

                 <div class="caption">

                     <h3 class="caption-title"><a href="#">未来之路</a></h3>

                 </div>

             </li>

             <li>

                 <img src="_images/p3.jpg" alt="独立寒秋" />

                 <div class="caption">

                     <h3 class="caption-title"><a href="#">独立寒秋</a></h3>

                 </div>

             </li>

             <li>

                 <img src="_images/p4.jpg" alt="高山流水" />

                 <div class="caption">

                     <h3 class="caption-title"><a href="#">高山流水</a></h3>

                 </div>

             </li>

             <li>

                 <img src="_images/p5.jpg" alt="天堑变通途" />

                 <div class="caption">

                     <h3 class="caption-title"><a href="#">天堑变通途</a></h3>

                 </div>

             </li>

              <li>

                 <img src="_images/p6.jpg" alt="远古的呼唤" />

                 <div class="caption">

                     <h3 class="caption-title"><a href="#">远古的呼唤</a></h3>

                 </div>

             </li>

              <li>

                 <img src="_images/p7.jpg" alt="欲与天公试比高" />

                 <div class="caption">

                     <h3 class="caption-title"><a href="#">欲与天公试比高</a></h3>

                 </div>

             </li>

              <li>

                 <img src="_images/p8.jpg" alt="人间仙境，室外桃园" />

                 <div class="caption">

                     <h3 class="caption-title"><a href="#">雪山天池</a></h3>

                 </div>

             </li>

             <li>

                 <img src="_images/p9.jpg" alt="山不转水转" />

                 <div class="caption">

                     <h3 class="caption-title"><a href="http://www.ldu.edu.cn/">山不转水转</a></h3>

                 </div>

             </li>

         </ul>

         <ul id="slider-controls" class="slider-controls"></ul>

     </div><!-- end of slider-container -->

     <p>适用浏览器：Firefox、Chrome、Opera、Safari，不支持IE8以下浏览器</p>

 </body>

 </html>

slide.css

 @charset "utf-8";

 /* 整体设置 */

 html {

     margin:0px;

     padding:0px;

 }

 body {

     background:#FF9;

     font-size:62.5%;

 }

 /* 页面标题 */

 h1 {

     font-family:"隶书","宋体","Times New Roman", Times, serif;

     font-size:5em;

     text-align:center;

     color:red;

     margin:10px auto;

 }

 /* 图片容器的样式定义 */

 .slider-container {

     margin:0px auto;

     background:#FFF;

     width:800px;

 }

 /* 图片列表的样式定义 */

 ul {

     list-style-type:none;

 }

 .slider-wrapper {

     margin:0px;

     padding:0px;

     position:relative;

     height:450px;

     width:100%;

     border:5px solid  #69F;

     overflow:hidden;

     z-index:;

     box-shadow:8px 8px 4px #999999;

 }

 .slider-wrapper li {

     display:none;

 }

 li.slide-first {

     display:block;

 }

 .slider-wrapper li img {

     position:absolute;

     top:0px;

     left:0px;

     max-width:100%;

     height: auto;

 }

 /* 图片标题的样式定义 */

 .caption {

     position:absolute;

     left:0px;

     bottom:0px;

     width:100%;

     padding 10px;

     background:rgba(0,0,0,0.6);

     transform:translateY(100%);

     -ms-transform:translateY(100%);     /* IE 9 */

     -moz-transform:translateY(100%);     /* Firefox */

     -webkit-transform:translateY(100%); /* Safari 和 Chrome */

     -o-transform:translateY(100%);     /* Opera */

 }

 .slider-wrapper li:hover .caption {

     transform:translateY(0%);

     -ms-transform:translateY(0%);     /* IE 9 */

     -moz-transform:translateY(0%);     /* Firefox */

     -webkit-transform:translateY(0%); /* Safari 和 Chrome */

     -o-transform:translateY(0%);     /* Opera */

     transition:all 0.3s ease-in;

     -ms-transition:all 0.3s ease-in; /* IE 9 */

     -moz-transition:all 0.3s ease-in; /* Firefox */

     -webkit-transition:all 0.3s ease-in; /* Safari 和 Chrome */

     -o-transition:all 0.3s ease-in; /* Opera */

 }

 .caption-title {

     font-size:1.6em;

     color:#6FF;

     font-weight:;

     line-height:2em;

 }

 .caption-title a {

     color:#FFF;

     font-size:2em;

     text-decoration:none;

 }

 .caption-title a:hover {

     background:red;

 }

 .caption-title a:active {

     background:blue;

 }

 /* 提示信息 */

 p {

     color:black;

     font-size:2em;

     text-align:center;

     margin:50px 0;

     line-height:2em;

     margin:20px auto;

 }

 /* 作者按钮 */

 .author a {

     font-family:"宋体";

     color:white;

     text-decoration:none;

     font-size:2em;

     border-radius:10px;

     padding:5px 7px;

     background:linear-gradient(#33C,#6CC);

 }

 .author a:hover {

     background:linear-gradient(#FCF,#000);

 }

 /* 控制按钮 */

 .slider-controls {

     text-align: center;

     margin-top: 15px;

 }

 .slider-controls li {

     background:#FC6;

     /*border-radius: 50%;*/

     display:inline-block;

     height: 12px;

     width: 12px;

     margin: 0px 4px;

     cursor: pointer;

 }

 .slider-controls li.active {

     background: red;

 }

slide.js

 /**

  * 幻灯片JS脚本

  */

 $(function() {

     var SliderModule = (function() {

         var pb = {};

         pb.el = $('#slider');  //el表达式

         pb.items = {

             panel: pb.el.find('li')  // 获得li集合

         }

         // 变量

         var SliderInterval,

             currentSlider = 0,  //当前幻灯片

             nextSlider = 1,     //下一张

             lengthSlider = pb.items.panel.length;  // 幻灯片集合长度

         // 初始化

         pb.init = function(settings) {

             this.settings = settings || {duration: 8000}

             var output = '';  // 输出的html语言

             // 初始化

             SliderInit();

             for(var i = 0; i < lengthSlider; i++) {

                 if (i == 0) {

                     output += '<li class="active"></li>';

                 } else {

                     output += '<li></li>';

                 }

             }

             // 单击按钮时切换图片

             $('#slider-controls').html(output).on('click', 'li', function (e){

                 var $this = $(this);

                 if (currentSlider !== $this.index()) {

                     changePanel($this.index());

                 };

             });

         }

         // 初始化方法

         var SliderInit = function() {

             SliderInterval = setInterval(pb.startSlider, pb.settings.duration);

         }

         pb.startSlider = function() {

             var panels = pb.items.panel,

                 controls = $('#slider-controls li');

             if (nextSlider >= lengthSlider) {

                 nextSlider = 0;

                 currentSlider = lengthSlider-1;

             }

             // 淡出淡入效果

             controls.removeClass('active').eq(nextSlider).addClass('active');

             panels.eq(currentSlider).fadeOut('slow');

             panels.eq(nextSlider).fadeIn('slow');

             // 设置当前幻灯片

             currentSlider = nextSlider;

             nextSlider += 1;

         }

         // 自动切换幻灯片

         var changePanel = function(id) {

             clearInterval(SliderInterval);

             var panels = pb.items.panel,

                 controls = $('#slider-controls li');

             // 幻灯片头尾

             if (id >= lengthSlider) {

                 id = 0;

             } else if (id < 0) {

                 id = lengthSlider-1;

             }

             // 幻灯片淡出淡入

             controls.removeClass('active').eq(id).addClass('active');

             panels.eq(currentSlider).fadeOut('slow');

             panels.eq(id).fadeIn('slow');

             // 当前幻灯片和下一张

             currentSlider = id;

             nextSlider = id+1;

             //重新初始化

             SliderInit();

         }

         return pb;

     }());

     // 图片切换速度 4000毫秒

     SliderModule.init({duration: 4000});

 });

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

JS+html--实现图片轮播的更多相关文章

js定时器实现图片轮播
效果展示如下: setInterval(moverleft,3000);定时器设置为3秒,而且实现图片下方的小圆点序号跟图片对应,点击小圆点也能切换图片. 代码如下: <!DOCTYPE htm ...
Javascript和jQuery WordPress 图片轮播插件，内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
html学习之路--简单图片轮播
一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...
推荐一款超级漂亮的HTML5 CSS3的图片轮播器
最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...
原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性制作图片轮播动画自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播运用 ...
原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
基于面向对象的图片轮播（js原生代码）
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现左右切换的做法基本步骤跟上一篇文章淡入淡出类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外 ...
图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

随机推荐

div 宽高相等2种实现方式
div.wh{ background:#ff0;width:50%;position:relative;display:inline-block; } div.wh:before{ content: ...
background-image 与 img 动画性能对比
开发H5常常会用到滑屏,目前大部分滑屏插件都是通过控制页面的transform属性来实现.尽管如此,我总是发现自己的H5滑动起来就是不如网上一些优秀案例流畅,表现为滑动动画会出现卡顿.跳帧. 后来我发 ...
如何快速部署国人开源的 Java 博客系统 Tale
除了闷头专研技术之外,程序员还需要不断地写作进行技术积累,写博客是其中最重要的方式之一.商业博客平台不少,但是更符合程序员背景的方案,是自己开发一个博客平台或者使用开源的博客平台. 开源的博客平台多如 ...
mysql---数据控制语言（用户及其权限管理）
用户管理用户数据所在位置: mysql中的所有用户,都存储在系统数据库(mysql)中的user 表中--不管哪个数据库的用户,都存储在这里.
linux下mysql的大小写是否区分设置
转:http://blog.csdn.net/qq_29246225/article/details/52293549 一.Linux中MySQL大小写详情:1.数据库名严格区分大小写2.表名严格区分 ...
RabbitMQ-从基础到实战（4）— 消息的交换（下）
0.目录 RabbitMQ-从基础到实战(1)- Hello RabbitMQ RabbitMQ-从基础到实战(2)- 防止消息丢失 RabbitMQ-从基础到实战(3)- 消息的交换(上) 1.简介 ...
第37篇 Asp.Net源码解析(二)--详解HttpApplication
这篇文章花了点时间,差点成烂到电脑里面,写的过程中有好几次修改,最终的这个版本也不是很满意,东西说的不够细,还需要认真的去看下源码才能有所体会,先这样吧,后面有时间把细节慢慢的再修改.顺便对于开发的学 ...
前端学PHP之Session
前面的话 Session技术和Cookie相似,都是用来储存使用者的相关资料.但最大的不同之处在于Cookie是将数据存放在客户端的计算机之中,而Session则是将数据存放于服务器系统之下.Sess ...
cuda学习笔记——deviceQuery
main(int argc, char **argv):argc是参数个数,**argv具体的参数,第0个是程序全名 cudaError_t类型:记录cuda错误,值为cudaSuccess则正确执行 ...
深入理解ajax系列第九篇——jQuery中的ajax
前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而 ...

JS+html--实现图片轮播

JS+html--实现图片轮播的更多相关文章

随机推荐

热门专题