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

随机推荐

1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区（题解第一弹）
1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: ...
Android手机USB调试安全闲扯(315晚会免费充电桩事件)
前言今年的又准时乖巧的观看了315晚会,与大家一同学习了各种发财致富的方式...咳.咳..学习防范违法行骗的各种手段.比较感兴趣的两个,一人脸识别,二公共充电桩安全隐患.第一个今天不扯, ...
POP3是收邮件的协议,SMTP是发邮件的协议,IMAP是一种邮箱通信协议。
我也是第一次接触这种服务,是因为我自己在做一个小小的自动推送天气情况到自己邮箱.所以才碰到这个的/ 看一下标题,我们可以先这样理解. POP3(Post Office Protocol - Versi ...
eclipse项目导入到android studio中文乱码处理
由于eclipse项目是gbk编码,Android studio默认用的是utf-8. 就会导致代码中的汉字,注释全部显示为乱码. 解决方法:在module的bulid.gradle中加入: comp ...
iOS 中的单例设计模式
单例设计模式:在它的核心结构中只包含一个被称为单例类的特殊类.例如文件管理中的NSUserDefault,应用程序中的UIApplication,整个应用程序就这一个单例类,负责应用程序的一些操作,单 ...
Android实战（一）学习了多个控件实现登录及记住密码功能
首先确定一下需要的控件: 两个EditText:用于输入账号和密码一个button:用于登录查看账号和密码是否正确一个checkbox:用于记住密码和账户一个Androidstudio:用于编写 ...
linux下的权限控制
终于还是要弄服务器了,这是多年前用fedora的时候整理的,也贴出来,顺便也再复习一下. 先来了解一下文件属性,在shell环境里输入:ls -l 可以查看当前目录文件.如:drwxr-xr-x. 1 ...
移动开发必须要弄明白的问题】详解Eclipse转Android Studio
2015-12-09 13:01:244264浏览3评论 AS出来一年多了,最近才从Eclipse转到AS,但我并不觉得使用Eclipse有多落后,它们都只是一个工具而已,哪个顺手就用哪个,用得好都能 ...
关于WdatePicker.js的结束时间大于开始时间
简单笔记 : WdatePicker.js 要使结束时间大于开始时间只要在线束时间的 minDate:'#F{$dp.$D(\'stimeParam\')}' 即可:不多说详细代码如下: <t ...
5w2h分析法则
5W2H分析法 5W2H分析法又叫七何分析法,是二战中美国陆军兵器修理部首创.简单.方便,易于理解.使用,富有启发意义,广泛用于企业管理和技术活动,对于决策和执行性的活动措施也非常有帮助,也有助于弥补 ...

JS+html--实现图片轮播

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

随机推荐

热门专题