简单常用的幻灯片播放实现代码

幻灯片自动播放图片是当前网站比较流行的一个展示方式。在网上我们能找到各种特效丰富的幻灯片插件和代码。这里项目需要，我自己做了一个简单的，就不详细讲解了，代码很简单。直接看效果图和代码吧。
 
所有代码 ppt.html，需要提供相应图片才能显示：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>PPT Demo</title>
<style type="text/css">
.ppt-container, .ppt-container ul, .ppt-container li, .ppt-container img {
margin : 0;
padding : 0;
border : 0;
}
.ppt-container {
width : 752px; /*根据展示图片的大小在这里设置容器的width和height*/
height : 328px;
position : relative;
}
.ppt-container img {
width : 100%;
height : 100%;
}
.ppt-container .hide {
display : none;
}
.ppt-container ul.image-list li {
position : absolute;
top : 0px;
left : 0px;
}
.ppt-container ul.button-list {
list-style : none;
position : absolute;
right : 20px;
bottom : 20px;
}
.ppt-container ul.button-list li {
float : left;
padding-right : 10px;
}
.ppt-container ul.button-list span {
background : #E5E5E5;
padding : 1px 7px;
line-height : 20px;
font-size : 13px;
display : block;
cursor : default;
}
.ppt-container ul.button-list span.selected {
color : #FFF;
background : #FF7000;
}
</style>
<script type="text/javascript">
$(function() {
var iCountOfImage = 3; // 共三张图片
var iPreIndex = 0; // 上一次索引位置
$(".ppt-container ul.button-list li span").click(function() {
var iIndex = $(this).attr("data-index");
if(iIndex == iPreIndex) {
return; // 点击了当前图片，不切换
}

$(".ppt-container .image-list li[data-index="+ iIndex +"]").fadeIn(1500);
$(".ppt-container .image-list li[data-index="+ iPreIndex +"]").fadeOut(1500);
iPreIndex = iIndex;
$(".ppt-container .button-list span").removeClass("selected");
$(this).addClass("selected");
});
setInterval(function() { // 自动播放，每5秒触发一次单击事件，来播放幻灯片
var iNextIndex = (iPreIndex + 1) % iCountOfImage;
$(".ppt-container ul.button-list li span[data-index="+ iNextIndex +"]").click();
}, 5000);
});
</script>
</head>
<body>
<div class="ppt-container">
<ul class="image-list">
<li data-index="0"><img src="ppt-images/ppt-1.jpg"/></li>
<li data-index="1" class="hide"><img src="ppt-images/ppt-2.jpg"/></li>
<li data-index="2" class="hide"><img src="ppt-images/ppt-3.jpg"/></li>
</ul>
<ul class="button-list">
<li><span data-index="0" class="selected">1</span></li>
<li><span data-index="1">2</span></li>
<li><span data-index="2">3</span></li>
</ul>
</div>
</body>
</html>

赞 (0)

相关推荐

  • js实现按钮控制图片360度翻转特效的方法

    本文实例讲述了js实现按钮控制图片360度翻转特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现按钮控制图片360度翻转特效</title> <body> <script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var o

  • javascript制作幻灯片（360度全景图片）

    javascript制作幻灯片（360度全景图片）

    在给客户做产品演示时经常会用到幻灯片,拥有360度的全景图片效果给用户带来好的体验价值.在这里给大家介绍一款来自Robert Pataki的360全景幻灯实现教程,此款教程使用js来实现一个超酷的全景幻灯,具体内容如下: 在这个教程中没有使用到任何插件,我们将使用HTML,css和javascript来实现,当然,也使用是jQuery这个框架! 如何实现? 我们将使用预先按照360生成的图片进行轮播来实现动画展示效果.包含了180个图片.所以加载时间可能比较长. 代码实现 我们将在css代码中添

  • JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码 var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var object = image.parentNode; if(isIE){ image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"; i++; if(i>4) {i

  • JS实现全景图效果360度旋转

    JS实现全景图效果360度旋转

    var scrl,direction="right"; var x,xold,xdiff, i=1; function change(start){ if(direction == "right"){ if(div1.scrollTop+190 0){ div1.scrollTop -= 190; } else{ div1.scrollTop = div1.scrollHeight; } } if(start) scrl = setTimeout("cha

  • js实现幻灯片效果(基于jquery插件)

    使用jquery插件jquery.smallslider.js也能实现幻灯片效果. htm代码如下: 复制代码 代码如下: <div id="flashbox" class="smallslider"> <ul style="position: absolute; top: 0px; width: 3225px;"> <li class="" style="float: left;&qu

  • 解决phpcms更换javascript的幻灯片代码调用图片问题

    今天找到了一个js要放在phpcms上边!但是他的代码是这样的 复制代码 代码如下: var titles = '创顶1|创顶2|创顶3|创顶4'; var imgs='{APP_PATH}cdstyle/images/image1.jpg|{APP_PATH}cdstyle/images/image2.jpg|{APP_PATH}cdstyle/images/image3.jpg|{APP_PATH}cdstyle/images/image4.jpg'; var urls='http://ba

  • js实现幻灯片播放图片示例代码

    1,在页面添加下面的元素.展示出置出图片文件列表文件. 复制代码 代码如下: <select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20"> <option value="图片的url">图片名字</option> </select> 2,播放文件列表的方法.主要是遍历文件列

  • 简单常用的幻灯片播放实现代码

    简单常用的幻灯片播放实现代码

    幻灯片自动播放图片是当前网站比较流行的一个展示方式.在网上我们能找到各种特效丰富的幻灯片插件和代码.这里项目需要,我自己做了一个简单的,就不详细讲解了,代码很简单.直接看效果图和代码吧.  所有代码 ppt.html,需要提供相应图片才能显示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

  • 网上比较常用的嵌入网页中的播放器代码收藏

    例如:网络上最流行的windows media流(asf,wma,wmv格式...),Real流(rm,rmvb...),还有MPEG系列编码格式(MP4/MP3格式...) Windows Media Video 是微软推出的一种流媒体格式,它是在"同门"的ASF(Advanced Stream Format)格式升级延伸来得.在同等视频质量下,WMV格式的体积非常小,因此很适合在网上播放和传输.Windows Media Player9兼容所有格式的WMV,官方编码器是Window

  • (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    这个其实很简单,只要在HTML上添加以上代码就OK了,前提是你的电脑上已经安装了播放器,如RealPlay. 复制代码 代码如下: <embed src="C:/mp3/10.19/画心.mp3" width="480" height="100"02. loop="false" autostart="false"> </embed> 还有更多的的播放器和设置可供选择: 页面插入REA

  • ＪＳ＋ＦＬＡＳＨ幻灯片播放图片脚本，整理了代码，使得调用更加方便！

    JS+FLASH幻灯片播放图片脚本,整理了代码,使得调用更加方便很多大站上都有的JS+FLASH幻灯片播放图片脚本,整理了代码,使得调用更加方便! 生成幻灯片式的网页图片效果演示 生成幻灯片式的网页图片效果演示 // 幻灯片式的网页图片滚动函数(不需要做任何改动) // 本程序由广州房产网整理,欢迎转载及提意见,版权没有 function roll_pic_flash(roll_pic_ary) { // 生成幻灯片式的网页图片滚动代码 var w = roll_pic_ary[3][0]; v

  • 简单的JS轮播图代码

    简单的JS轮播图代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

  • jQuery实现带有上下控制按钮的简单多行滚屏效果代码

    jQuery实现带有上下控制按钮的简单多行滚屏效果代码

    本文实例讲述了jQuery实现带有上下控制按钮的简单多行滚屏效果代码.分享给大家供大家参考.具体如下: 这里使用了jQuery插件来实现最简单的多行文字滚屏效果,还带有上下滚动控制按钮,卷动速度,数值越大,速度越慢(毫秒),滚动的时间间隔是(毫秒),每次滚动的行数,默认为一屏,即父容器高度-- 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-up-down-scroll-src-style-codes/ 具体代码如下: <!DOCT

  • Unity常用音频操作类示例代码

    下面通过代码给大家介绍Unity常用音频操作类,具体代码如下所示: using UnityEngine; using System.Collections; public class AudioPlay : MonoBehaviour { public static AudioPlay Instance; public AudioClip[] FuChuAudio; public AudioSource FCAudio; // public AudioSource BabyAudio; // U

  • 简单易用的倒计时js代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>简单易用的倒计时js代码</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-size:18px; text-align:center;} .time{ height:30px; padding:20

  • js实现的万能flv网页播放器代码

    本文实例讲述了js实现的万能flv网页播放器代码.分享给大家供大家参考,具体如下: <div id="player5"><script type="text/javascript" src="swfobject.js"></script><script type="text/javascript"> var s5 = new SWFObject("FlvPlayer20

  • Javascript简单实现面向对象编程继承实例代码

    本文讲述了Javascript简单实现面向对象编程继承实例代码.分享给大家供大家参考,具体如下: 面向对象的语言必须具备四个基本特征: 1.封装能力(即允许将基本数据类型的变量或函数放到一个类里,形成类的成员或方法) 2.聚合能力(即允许类里面再包含类,这样可以应付足够复杂的设计) 3.支持继承(父类可以派生出子类,子类拥有父母的属性或方法) 4.支持多态(允许同样的方法名,根据方法签名[即函数的参数]不同,有各自独立的处理方法) 这四个基本属性,javascript都可以支持,所以javasc

随机推荐