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


Posted in Javascript onSeptember 25, 2013

幻灯片自动播放图片是当前网站比较流行的一个展示方式。在网上我们能找到各种特效丰富的幻灯片插件和代码。这里项目需要,我自己做了一个简单的,就不详细讲解了,代码很简单。直接看效果图和代码吧。
简单常用的幻灯片播放实现代码 
所有代码 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>
Javascript 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
js动态引入的四种方法
May 05 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
vscode自定义vue模板的实现
Jan 27 Vue.js
javascript date格式化示例
Sep 25 #Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 #Javascript
js中的this关键字详解
Sep 25 #Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 #Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 #Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 #Javascript
JS 实现导航栏悬停效果(续)
Sep 24 #Javascript
You might like
PHP新手上路(四)
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
Vue中props的使用详解
2018/06/15 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
在pycharm中显示python画的图方法
2019/08/31 Python
pygame实现飞机大战
2020/03/11 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
水电工岗位职责
2014/02/12 职场文书
借款协议书
2014/04/12 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
2014年安全生产责任书
2014/07/22 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
求职简历自我评价范文
2015/03/10 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫