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


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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
PHP 图片上传代码
2011/09/13 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
node跨域请求方法小结
2017/08/25 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
Flask框架web开发之零基础入门
2018/12/10 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python实现桌面气泡提示功能
2019/07/29 Python
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
python删除csv文件的行列
2021/04/06 Python
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python