java幻灯片播放代码_简单常用的幻灯片播放实现代码
幻灯片自动播放图片是当前网站比较流行的一个展示方式。在网上我们能找到各种特效丰富的幻灯片插件和代码。这里项目需要,我自己做了一个简单的,就不详细讲解了,代码很简单。直接看效果图和代码吧。
所有代码 ppt.html,需要提供相应图片才能显示:
PPT Demo
.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;
}
$(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);
});
- 1
- 2
- 3
java幻灯片播放代码_简单常用的幻灯片播放实现代码相关推荐
- python画画100行代码_简单几步,100行代码用Python画一个蝙蝠侠的logo
原标题:简单几步,100行代码用Python画一个蝙蝠侠的logo 转自:菜鸟学Python 蝙蝠侠作为DC漫画的核心人物之一,一直都受到广大粉丝的喜爱,而笔者作为DC的铁杆粉丝,自然也是老爷(粉丝对 ...
- python有趣的简单代码_简单几步,100行代码用Python画一个蝙蝠侠的logo
转自:菜鸟学Python 蝙蝠侠作为DC漫画的核心人物之一,一直都受到广大粉丝的喜爱,而笔者作为DC的铁杆粉丝,自然也是老爷(粉丝对蝙蝠侠的昵称)的支持者.今天,笔者就用Python来画一个蝙蝠侠的l ...
- java词频统计简单带代码_简单的词频统计代码实现(PDF格式)
周末抽空帮同学论文写了一段统计词频的代码,做个简单总结.出于职业病,代码使用Springboot+Maven搭建,面向抽象编程,并通过web请求控制执行. 依赖配置 org.springframewo ...
- java数位倒置递归_有人能解释一下这个递归代码如何在java中反转int吗?
r根本不用 10*r+n%10 实际上,这是一件很棘手的事情,而且很酷. 这是一个很好的例子,说明变量命名不当会使代码难以理解.我们有3行代码可以实际执行某些操作,但它的工作原理并不明显. priva ...
- 三菱m70刀杯上下m代码_加工中心常用G代码和M代码大全,收藏好了
我们在使用数控加工中心的过程中,最常见的数控代码有两种,一种是G代码,一种是M代码.本文整理了常见的G代码和M代码的含义,不同厂商不同的数控系统可能稍有出入,在实际中以说明书为准. G代码:准备功能, ...
- 带倍速播放的播放器_带有HTML5的MP3播放器
带倍速播放的播放器 MP3 Player with HTML5 In you are a beginner in HTML5 and you are looking for new knowledge ...
- 微信推文图片间距有缝的代码_使用记录接缝进行旧代码单元测试
微信推文图片间距有缝的代码 在大多数情况下,使用遗留代码可能很困难. 但是,当涉及到添加新功能,重构或维护您不熟悉的代码时,它可能会变得势不可挡. 如果您已经使用敏捷技术几年了,并且突然间您面对大量的 ...
- 自定义音频播放器_创建自定义HTML5音频播放器
自定义音频播放器 在本教程中,我将向您介绍HTML5音频,并向您展示如何创建自己的播放器. 如果您想走捷径,请查看Envato市场上可用的现成的HTML5音频播放器 . 它使您可以从各种来源创建播放列 ...
- html中看到php代码_如何在HTML中嵌入PHP代码
如何在HTML中嵌入PHP代码 对于一个有经验的 PHP Web 开发者,在HTML中嵌入PHP代码是一件非常容易的事情.但是对于刚开始接触 PHP 编程语言的新手这就是一个问题.下面是小编为大家带来 ...
最新文章
- SharePoint 2010中的客户端AJAX应用——ASP.NET AJAX模板
- IE 无法点击文本框或输入文字
- 概率整形 Peobabilistic Shaping PS
- 转,mysql的select * into
- hive中如何进行按周计算
- ObjectDataSourc用法之三(排序)
- java apktoo_apktool.jar
- Java @Deprecated注解
- win10删除开机密码_win10系统,电脑密码和微软密码都忘记了,怎么办? Day22
- 递归和尾递归的区别和原理
- python有趣的案例_Python有趣的小案例
- 74AHC1G32GW 74系列逻辑芯片
- 光纤收发器的原理及应用_光纤收发器
- Winform UI界面设计例程——侧边框栏折叠
- [转载]使用 Apache Geronimo 和 JMS 构建事件驱动的框架
- Flink Table Api 之Over Windows使用
- emp和emn是什么文件,emnemp是什么文件
- 【转】SpringMVC的工作原理图
- 发邮件的JAVA程序
- 什么是smarty及其安装
热门文章
- python建模大赛算法_Python数据分析kaggle-Titanic+天池-工业蒸汽量预测建模算法
- Win11系统使用Excel表格的时候很卡怎么办
- 打印更无缝:微软改善Win11中通用打印体验
- 新萝卜家园win11全新专业版64位系统v2021.07
- Win7系统Office卸载不干净无法安装怎么办
- 少儿故事:小乌鸦智斗老鹰
- SpringCloud 超详细个人笔记
- MySQL中concat函数(连接字符串)
- rmi远程反序列化rce漏洞_Apache Dubbo Provider默认反序列化远程代
- redis查询所有key命令_三歪推荐:Redis常见的面试题