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


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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 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
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
Python字符串处理实例详解
2017/05/18 Python
Python中的集合介绍
2019/01/28 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
《雪地里的小画家》教学反思
2014/02/22 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
给校长的建议书100字
2014/05/16 职场文书
师德师风自查总结
2014/10/14 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
汽车转让协议书范本
2014/12/07 职场文书
股权转让协议范本
2014/12/07 职场文书
五一劳动节活动总结
2015/02/09 职场文书
2015年财务部工作总结
2015/04/10 职场文书
小学教研工作总结2015
2015/05/13 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
python 实现图片特效处理
2022/04/03 Python
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript