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


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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
JavaScript类库D
Oct 24 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 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中动态HTML的输出技术
2006/10/09 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
Convert Seconds To Hours
2007/06/16 Javascript
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
vue实现短信验证码输入框
2020/04/17 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python计算时间差的方法
2015/05/20 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python里面search()和match()的区别
2016/09/21 面试题
七夕活动策划方案
2014/08/16 职场文书
2015年财政所工作总结
2015/04/25 职场文书
工作后的感想
2015/08/07 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers