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


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 相关文章推荐
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
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
ThinkPHP中的关联模型注意点
2014/06/16 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python分数表示方式和写法
2019/06/26 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python 错误处理 assert详解
2020/04/20 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
毕业自荐书
2013/12/09 职场文书
班级安全教育实施方案
2014/02/23 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
求职信格式范文
2015/03/19 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
专职安全员岗位职责
2015/04/11 职场文书
教师节领导致辞
2015/07/29 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
导游词之峨眉山
2019/12/16 职场文书