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

随机推荐

asp.net core mvc剖析：mvc动作选择
一个http请求过来后,首先经过路由规则的匹配,找到最符合条件的的IRouter,然后调用IRouter.RouteAsync来设置RouteContext.Handler,最后把请求交给RouteC ...
Java Stream API入门篇
本文github地址你可能还没意识到Java对函数式编程的重视程度,看看Java 8加入函数式编程扩充多少类就清楚了.Java 8之所以费这么大功夫引入函数式编程,原因有二: 代码简洁,函数式编程写 ...
3402: [Usaco2009 Open]Hide and Seek 捉迷藏
3402: [Usaco2009 Open]Hide and Seek 捉迷藏 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 78 Solved: 6 ...
机器学习基石 5 Training versus Testing
机器学习基石 5 Training versus Testing Recap and Preview 回顾一下机器学习的流程图: 机器学习可以理解为寻找到 \(g\),使得 \(g \approx f ...
mvp架构解析
MVP现在已经是目前最火的架构,很多的框架都是以MVP为基础,甚至于Google自己都出一个MVP的开源架构.https://github.com/googlesamples/android-arch ...
配置Windows Server 2012服务器远程连接支持多人同时登陆
1.运行输入gpedit.msc 进入组策略 2.计算机配置--管理模版--windows组件--远程桌面服务--远程桌面会话主机--连接 3.找到限制连接的数量,启用,并改为100. 4.找到将远 ...
如何用正确的姿势查看主机系统的CPU信息
一.关于CPU的几个概念 CPU的作用计算机中的中央处理单元(CPU)执行基本的计算工作 -- 运行程序.但是,一个单核的CPU同一时间只能一次执行一个任务,为了提高计算机的处理能力,也就出现了多C ...
Halloc内存分配器
MAX_NSBS 8192:默认的最大superblocks数量 SB_SET_SZ(MAX_NSBS / WORD_SZ):superblock set的大小,每个set32个superblcoks ...
ubuntu nsight上链接OpenGL
写一个需要使用OpenGL的程序,右击该程序名,此处需要OpenGL库的程序为Julia-C 右击,选择属性,弹出属性对话框,在左边选择build下的设置,中间窗格中选择GCC C++ Linker下 ...
ajax ----进度条的原理
一.进度条的原理新知识点:Html5中FormData,xmlHttpRequest中的upload属性,progress事件监控 xmlHttpRequest中的upload属性,实现: < ...

JS+html--实现图片轮播

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

随机推荐

热门专题