jquery图片播放器特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片播放器特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片播放器</title>
<link rel="stylesheet" href="css/jquery.imageplayer.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.imageplayer.js"></script>
<style type="text/css">
  body {
    background:#333;
    text-align:center;
    margin:0;
    padding:0;
    font-family:arial, helvetica, sans-serif;
    font-size:9pt;
  }
  #container {
    width:650px;
    padding:20px;
    background:#fff;
    margin:30px auto 0 auto;
    text-align:left;
  }
  
  #footer {
    margin:20px 0 0 0;
    padding:20px 0 0 0;
    text-align:right;
    color:#777;
    border-top:1px solid #ccc;
  }
    
  
  h1 {
    font-size:21pt;
    padding-bottom:10px;
    margin:0 0 10px 0;
    border-bottom:1px solid #ccc;
  }
  
  h3 { font-size:12pt; }
  
  pre {
    border:1px solid #ccc;
    padding:10px;
    background:#eee;
  }
  
  a {
    color:#d00;
  }
  
  a:hover { color:#fff; background-color:#333; }
</style>
</head>
<body>
  <div id="container">
    <h1>jquery图片播放器</h1>

    <ul id="image_player">
        <li><img src="./images/photos/sample1.png" /></li>
        <li><img src="./images/photos/sample2.png" /></li>
        <li><img src="./images/photos/sample3.png" /></li>
        <li><img src="./images/photos/sample4.png" /></li>
        <li><img src="./images/photos/sample5.png" /></li>
        <li><img src="./images/photos/sample6.png" /></li>
        <li><img src="./images/photos/sample7.png" /></li>
        <li><img src="./images/photos/sample8.png" /></li>
        <li><img src="./images/photos/sample9.png" /></li>
        <li><img src="./images/photos/sample10.png" /></li>
    </ul>

  </div>
	<script type="text/javascript">
        $('#image_player').imagePlayer();
	</script>
</body>
</html>

JS代码(jquery.imageplayer.js):

;
	(function($){
	$.fn.imagePlayer = function(options){
	var rotator = null;
	var clicked = false;
	var settings = $.extend({
	stageWidth:400,stageHeight:300,autoStart:true,pauseOnHover:true,delay:5,transition:'slow',loop:true}
,options);
	$(this).each(function(){
	// Get playlist object,and its ID. playlist = $(this);
	player_id = this.id;
	// Get a list of images inside the player. images = [];
	widths = [];
	heights = [];
	playlist.find('img').each(function(){
	images.push(this.src) widths.push($(this).width());
	heights.push($(this).height());
}
);
	// Player elements. player = $('<div>').addClass('img_player');
	stage = $('<div>').addClass('stage');
	controls = $('<div>').addClass('controls');
	play_pause = $('<a>').attr('href','#');
	scrubber = $('<div>').addClass('scrubber');
	scrubber_handle = $('<a>').attr('href','#');
	// Set dimensions player.css({
	width:settings.stageWidth + 'px',height:settings.stageHeight + 50 + 'px'}
);
	stage.css({
	width:settings.stageWidth + 'px',height:settings.stageHeight + 'px'}
);
	controls.css({
	width:settings.stageWidth + 'px'}
);
	scrubber.css({
	width:settings.stageWidth - 50 + 'px'}
);
	// Set the right control for play/pause. if(settings.autoStart===true) play_pause.addClass('pause');
	else play_pause.addClass('play');
	// Bind mouse interactions stage.bind('mouseover',function(e){
	handle_image_hover(e,this)}
).bind('mouseout',function(e){
	handle_image_out(e,this)}
);
	play_pause.bind('click',function(e){
	handle_control_click(e,this)}
);
	scrubber.bind('click',function(e){
	handle_scrubber_click(e,this)}
);
	// Build the player. player.append(stage).append(controls.append(play_pause).append(scrubber.append(scrubber_handle)));
	playlist.hide().after(player);
	// Scrubber incriments for image switching. incriment = Math.floor(scrubber.width() / images.length);
	if(settings.autoStart === true){
	image_cycle();
}
}
);
	function handle_image_hover(e,elem){
	if(clicked !== true &&settings.pauseOnHover===true && play_pause.attr('class') === 'pause'){
	play_pause.attr('class','play');
	clearTimeout(rotator);
	scrubber_handle.stop(true,true);
}
}
function handle_image_out(e,elem){
	if(clicked !== true && settings.pauseOnHover===true && play_pause.attr('class') === 'play'){
	play_pause.attr('class','pause');
	image_cycle();
}
}
function handle_control_click(e,elem){
	e.preventDefault();
	elem = $(elem,player);
	// hasClass is buggy here for some reason... if(elem.attr('class') == 'play'){
	elem.attr('class','pause');
	clicked=false;
	image_cycle();
}
else{
	elem.attr('class','play');
	clearTimeout(rotator);
	scrubber_handle.stop(true,true);
	clicked=true;
}
}
function handle_scrubber_click(e,elem){
	e.preventDefault();
	elem = $(elem);
	pos = elem.offset();
	clearTimeout(rotator);
	scrubber_handle.stop();
	x_coord = Math.ceil(e.pageX - pos.left);
	scrubber_handle.css('left',x_coord + 'px');
	i = Math.floor(x_coord / incriment);
	play_pause.attr('class','pause');
	clicked=false;
	image_cycle();
}
function image_transition(img){
	clearTimeout(rotator);
	stage.fadeOut(settings.transition,function(){
	max_left = incriment*i;
	current_left = parseFloat(scrubber_handle.css('left'));
	remaining = max_left - current_left;
	percent = remaining/incriment;
	scrubber_handle.animate({
	left:'+='+remaining+'px'}
,settings.delay*(1000*percent));
	image = $('<img>').attr({
	src:img,alt:'Side '+i+1}
);
	stage.html(image);
	if(widths[i] > settings.stageWidth){
	ratio = settings.stageWidth / widths[i];
	heights[i] = heights[i]*ratio;
	dimensions ={
	width:settings.stageWidth,height:heights[i],'margin-top':settings.stageHeight/2 - heights[i]/2}
image.css(dimensions).attr(dimensions);
}
if(heights[i] > settings.stageHeight){
	ratio = settings.stageHeight / heights[i];
	dimensions ={
	width:widths[i]*ratio,height:settings.stageHeight}
image.css(dimensions).attr(dimensions);
}
stage.fadeIn(settings.transition,function(){
	rotator = setTimeout(image_cycle,settings.delay*1000);
}
);
}
);
}
function image_cycle(){
	clearTimeout(rotator);
	if(typeof i == "undefined") i=0;
	if(settings.loop===true){
	if(i > images.length-1) i=0;
}
else{
	clearTimeout(rotator);
	scrubber_handle.stop(true,true);
}
if(i<images.length){
	if(i===0 && parseFloat(scrubber_handle.css('left')) > incriment) scrubber_handle.css('left','0');
	image_transition(images[i]);
}
i++;
}
}
}
)(jQuery);

CSS代码(jquery.imageplayer.css):

.img_player{background:#333;border:1px solid #000;padding:10px;}
.img_player .stage{margin:0 auto 0 auto;background:#333;overflow:hidden;text-align:center;}
.img_player .controls{height:40px;margin-top:10px;background:url(../images/player.png) 0 -120px repeat-x;overflow:hidden;}
.img_player .controls a{text-decoration:none;outline:none;text-indent:-9999px;display:block;float:left;width:40px;height:40px;}
.img_player a.play{background:url(../images/player.png) 0 0 no-repeat;}
.img_player a.pause{background:url(../images/player.png) 0 -40px no-repeat;}
.img_player .scrubber{float:left;height:40px;background:url(../images/player.png) 0 -80px repeat-x;}
.img_player .scrubber a{display:block;position:relative;top:50%;left:0;margin:-6px 0 0 0;width:8px;height:12px;overflow:hidden;text-decoration:none;text-indent:-9999px;outline:none;background:url(../images/player.png) 0 -160px no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)