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


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 相关文章推荐
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
React学习之JSX与react事件实例分析
Jan 06 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
js中复选框的取值及赋值示例详解
Oct 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
PHP生成带有雪花背景的验证码
2008/09/28 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php强制下载文件函数
2016/08/24 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python正则表达式之对号入座篇
2018/07/24 Python
python实现C4.5决策树算法
2018/08/29 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python 实现图片裁剪小工具
2021/02/02 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
如何实现一个自定义类的序列化
2012/05/22 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
就业自我评价
2014/02/04 职场文书
学生党员检讨书范文
2014/12/27 职场文书
研究生简历自我评
2015/03/11 职场文书
销售会议开幕词
2016/03/04 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js