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 ...

随机推荐

SIFT中的高斯模糊
高斯模糊是众多模糊算法中的一种,所谓的模糊,就是平滑图像,消除像素之间的差异,最容易想到的方法就是均值平滑. .均值模糊均值模糊就是取目标像素周围像素的平均值.譬如像素矩阵. |1|1|1| |1 ...
BUG，带给我的思考
今天打开EverNote时,翻到了四年前在anjuke时做的一些bug分析总结.现在回过头看看也是有些价值所在,挑选出部分bug分享,希望能有所启发. 一. iOS新房APP4.4由于在91市场进行试 ...
ACM 阶乘的0
阶乘的0 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述计算n!的十进制表示最后有多少个0 输入第一行输入一个整数N表示测试数据的组数(1<=N< ...
在.NET项目中使用PostSharp，实现AOP面向切面编程处理
PostSharp是一种Aspect Oriented Programming 面向切面(或面向方面)的组件框架,适用在.NET开发中,本篇主要介绍Postsharp在.NET开发中的相关知识,以及一 ...
JavaScript 再认识（一）：Function调用模式对this的影响
近来,学习了一下<JavaScript精粹>,读到了函数这章,理清了JavaScript中this在不同调用模式下的指向. 1.Function调用模式:Function是JavaScri ...
如何javascript获取css中的样式
obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...
NDK(三方库引入、Mk文件)
NDK笔记-----第三方库引入一.字符操作: 1 二.NDK*(JNI)对象操作: 2 1.C++调用java对象 3 三.Android.mk说明: 3 四.Application.mk说明 3 ...
使sublimetext3在ubuntu下可以打中文和在windows的dos命令行下正常显示中文
学习闲暇之余,总结一下在windows和ubuntu下使用sublimetext3遇到的问题一.关于sublimetext3在windows的dos命令行下不能编译运行中文的解决方案: 因为dos命 ...
在调用相机后idleTimerDisabled失效的问题
在调用相机后idleTimerDisabled失效的问题相关资料: http://stackoverflow.com https://github.com/jamiemcd 问题前几天有人在群里边 ...
Tcl与Design Compiler （四）——DC启动环境的设置
本文属于原创手打(有参考文献),如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/ ,作者:IC_learner 主要内容有: ·启动环 ...

JS+html--实现图片轮播

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

随机推荐

热门专题