<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery多功能自动播放幻灯片 - 网页模板</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 代码 开始 -->
<div id="msg_slideshow" class="msg_slideshow" style="margin:0 auto">
<div id="msg_wrapper" class="msg_wrapper">
</div>
<div id="msg_controls" class="msg_controls"><!-- right has to animate to 15px, default -110px -->
<a href="#" id="msg_grid" class="msg_grid"></a>
<a href="#" id="msg_prev" class="msg_prev"></a>
<a href="#" id="msg_pause_play" class="msg_pause"></a><!-- has to change to msg_play if paused-->
<a href="#" id="msg_next" class="msg_next"></a>
</div>
<div id="msg_thumbs" class="msg_thumbs"><!-- top has to animate to 0px, default -230px -->
<div class="msg_thumb_wrapper">
<a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg"/></a>
<a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg"/></a>
<a href="#"><img src="images/thumbs/3.jpg" alt="images/3.jpg"/></a>
<a href="#"><img src="images/thumbs/4.jpg" alt="images/4.jpg"/></a>
<a href="#"><img src="images/thumbs/5.jpg" alt="images/5.jpg"/></a>
<a href="#"><img src="images/thumbs/6.jpg" alt="images/6.jpg"/></a>
</div>
<div class="msg_thumb_wrapper" style="display:none;">
<a href="#"><img src="images/thumbs/7.jpg" alt="images/7.jpg"/></a>
<a href="#"><img src="images/thumbs/8.jpg" alt="images/8.jpg"/></a>
<a href="#"><img src="images/thumbs/9.jpg" alt="images/9.jpg"/></a>
<a href="#"><img src="images/thumbs/10.jpg" alt="images/10.jpg"/></a>
<a href="#"><img src="images/thumbs/11.jpg" alt="images/11.jpg"/></a>
<a href="#"><img src="images/thumbs/12.jpg" alt="images/12.jpg"/></a>
</div>
<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
<span class="msg_loading"></span><!-- show when next thumb wrapper loading -->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* interval : time between the display of images
* playtime : the timeout for the setInterval function
* current : number to control the current image
* current_thumb : the index of the current thumbs wrapper
* nmb_thumb_wrappers : total number of thumbs wrappers
* nmb_images_wrapper : the number of images inside of each wrapper
*/
var interval = 4000;
var playtime;
var current = 0;
var current_thumb = 0;
var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length;
var nmb_images_wrapper = 6;
/**
* start the slideshow
*/
play();
/**
* show the controls when
* mouseover the main container
*/
slideshowMouseEvent();
function slideshowMouseEvent(){
$('#msg_slideshow').unbind('mouseenter')
.bind('mouseenter',showControls)
.andSelf()
.unbind('mouseleave')
.bind('mouseleave',hideControls);
}
/**
* clicking the grid icon,
* shows the thumbs view, pauses the slideshow, and hides the controls
*/
$('#msg_grid').bind('click',function(e){
hideControls();
$('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
pause();
$('#msg_thumbs').stop().animate({'top':'0px'},500);
e.preventDefault();
});
/**
* closing the thumbs view,
* shows the controls
*/
$('#msg_thumb_close').bind('click',function(e){
showControls();
slideshowMouseEvent();
$('#msg_thumbs').stop().animate({'top':'-230px'},500);
e.preventDefault();
});
/**
* pause or play icons
*/
$('#msg_pause_play').bind('click',function(e){
var $this = $(this);
if($this.hasClass('msg_play'))
play();
else
pause();
e.preventDefault();
});
/**
* click controls next or prev,
* pauses the slideshow,
* and displays the next or prevoius image
*/
$('#msg_next').bind('click',function(e){
pause();
next();
e.preventDefault();
});
$('#msg_prev').bind('click',function(e){
pause();
prev();
e.preventDefault();
});
/**
* show and hide controls functions
*/
function showControls(){
$('#msg_controls').stop().animate({'right':'15px'},500);
}
function hideControls(){
$('#msg_controls').stop().animate({'right':'-110px'},500);
}
/**
* start the slideshow
*/
function play(){
next();
$('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
playtime = setInterval(next,interval)
}
/**
* stops the slideshow
*/
function pause(){
$('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
clearTimeout(playtime);
}
/**
* show the next image
*/
function next(){
++current;
showImage('r');
}
/**
* shows the previous image
*/
function prev(){
--current;
showImage('l');
}
/**
* shows an image
* dir : right or left
*/
function showImage(dir){
/**
* the thumbs wrapper being shown, is always
* the one containing the current image
*/
alternateThumbs();
/**
* the thumb that will be displayed in full mode
*/
var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
.find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
.find('img');
if($thumb.length){
var source = $thumb.attr('alt');
var $currentImage = $('#msg_wrapper').find('img');
if($currentImage.length){
$currentImage.fadeOut(function(){
$(this).remove();
$('<img />').load(function(){
var $image = $(this);
resize($image);
$image.hide();
$('#msg_wrapper').empty().append($image.fadeIn());
}).attr('src',source);
});
}
else{
$('<img />').load(function(){
var $image = $(this);
resize($image);
$image.hide();
$('#msg_wrapper').empty().appe
jQuery多功能自动播放幻灯片.zip
版权申诉
83 浏览量
2022-11-20
22:07:58
上传
评论
收藏 716KB ZIP 举报
jQuery多功能自动播放幻灯片.zip （37个子文件） 
jQuery多功能自动播放幻灯片 jiaoben3513 css 
style.css 4KB images 
8.jpg 21KB 2.jpg 18KB 1.jpg 29KB 6.jpg 29KB 3.jpg 26KB 5.jpg 21KB 11.jpg 32KB 4.jpg 23KB thumbs 8.jpg 32KB 2.jpg 30KB 1.jpg 36KB 6.jpg 36KB 3.jpg 38KB 5.jpg 33KB 11.jpg 42KB 4.jpg 57KB 10.jpg 23KB 12.jpg 27KB 9.jpg 28KB 7.jpg 39KB 10.jpg 23KB 12.jpg 29KB 9.jpg 15KB 7.jpg 26KB
index.html 14KB icons 
next_thumb.png 3KB next.png 3KB grid.png 3KB prev.png 3KB up.png 3KB prev_thumb.png 3KB pause.png 3KB play.png 3KB
loading.gif 3KB js jquery.min.js 91KB jQuery多功能自动播放幻灯片.jpg 63KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- 信息办公个人求职管理系统-jobgljsp.rar
- 信息办公一流网络JSP网络管理系统 v1.0-yljsp10.rar
- chirpstack学习
- 管家婆辉煌、财贸、工贸、服装，食品，千方模拟狗
- 基于python开发的工业环境老鼠检测+源码+文档（毕业设计&课程设计&项目开发）
- USB转以太网的芯片SR9900全套设计资料包括（参考设计原理图PCB+ Linux -Windows驱动程序+量产工具)
- 信息办公XML考试系统-xmlks.rar
- 基于python开发的无人机图像目标检测+实验数据+开发文档+操作流程+源码（毕业设计&课程设计&项目开发）
- 全球智能商品管理与优化系统
- IDM下载器(电脑小工具)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
