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>
<script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.blinds-0.9.js"></script>
</head>

<body>
	<div id="container">
		<h1>jQuery Blinds</h1>
		<h2 class="subtitle">Slideshow using CSS Sprites</h2>

		<h3>Demo </h3>
		<!-- slideshow images -->
		<div class="slideshow"> 
		   <ul> 
			  <li><img src="lemons/1.jpg" alt="lemon" /></li>
			  <li><img src="lemons/2.jpg" alt="lemon tea" /></li>
			  <li><img src="lemons/3.jpg" alt="splashing lemon" /></li>
			  <li><img src="lemons/4.jpg" alt="salad with lemon" /></li>
			  <li><img src="lemons/5.jpg" alt="lemonade!" /></li>
			  <li><img src="lemons/6.jpg" alt="sliced lemon" /></li>
			  <li><img src="lemons/7.jpg" alt="dripping lemon" /></li>
		   </ul> 
		</div> 

		<!-- change image links -->
		<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)">1</a>
		<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1)">2</a>
		<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2)">3</a>
		<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(3)">4</a>
		<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(4)">5</a>
		<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(5)">6</a>
		<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(6)">7</a>

		<br/><br/>

		<h3>Features</h3>
		<ul>
			<li>Smooth <b>animated transition</b></li>
			<li>Customizable sprite <b>grid</b></li>
			<li>Customizable animation <b>ochestration</b></li>
			<li><b>Multiple instances</b> on the same webpage</li>
			<li><b>jQuery compatible</b> (plugin)</li>
			<li><b>Unobtrusive</b> javascript</li>
		</ul>

		<h3>Compatibility</h3>
		Works great on the following browsers (Windows):
		<ul>
			<li>Firefox 3.5</li>
			<li>IE 8</li>
			<li>IE 7</li>
			<li>IE 6 (imagine my surprise!)</li>
			<li>Opera 10</li>
			<li>Chrome 4</li>
			<li>Safari 4</li>
		</ul>

		<h3>Usage</h3>

		<div class="code">
			<div class="title">HTML</div>
<pre style="color:#330066; background-color:#ffffff; font-size:10pt; font-family:'Courier New';"><span style="color:#555555">&lt;</span>div <span style="color:#ff3030">class</span><span style="color:#555555">=</span><span style="color:#1861a7">&quot;slideshow&quot;</span><span style="color:#555555">&gt;</span>
   <span style="color:#555555">&lt;</span>ul<span style="color:#555555">&gt;</span>
      <span style="color:#555555">&lt;</span>li<span style="color:#555555">&gt;&lt;</span>img src<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemons/1.jpg&quot;</span> alt<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemon&quot;</span> <span style="color:#555555">/&gt;&lt;/</span>li<span style="color:#555555">&gt;</span>
      <span style="color:#555555">&lt;</span>li<span style="color:#555555">&gt;&lt;</span>img src<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemons/2.jpg&quot;</span> alt<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemon tea&quot;</span> <span style="color:#555555">/&gt;&lt;/</span>li<span style="color:#555555">&gt;</span>
      <span style="color:#555555">&lt;</span>li<span style="color:#555555">&gt;&lt;</span>img src<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemons/3.jpg&quot;</span> alt<span style="color:#555555">=</span><span style="color:#1861a7">&quot;splashing lemon&quot;</span> <span style="color:#555555">/&gt;&lt;/</span>li<span style="color:#555555">&gt;</span>
      <span style="color:#555555">&lt;</span>li<span style="color:#555555">&gt;&lt;</span>img src<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemons/4.jpg&quot;</span> alt<span style="color:#555555">=</span><span style="color:#1861a7">&quot;salad with lemon&quot;</span> <span style="color:#555555">/&gt;&lt;/</span>li<span style="color:#555555">&gt;</span>
      <span style="color:#555555">&lt;</span>li<span style="color:#555555">&gt;&lt;</span>img src<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemons/5.jpg&quot;</span> alt<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemonade!&quot;</span> <span style="color:#555555">/&gt;&lt;/</span>li<span style="color:#555555">&gt;</span>
      <span style="color:#555555">&lt;</span>li<span style="color:#555555">&gt;&lt;</span>img src<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemons/6.jpg&quot;</span> alt<span style="color:#555555">=</span><span style="color:#1861a7">&quot;sliced lemon&quot;</span> <span style="color:#555555">/&gt;&lt;/</span>li<span style="color:#555555">&gt;</span>
      <span style="color:#555555">&lt;</span>li<span style="color:#555555">&gt;&lt;</span>img src<span style="color:#555555">=</span><span style="color:#1861a7">&quot;lemons/7.jpg&quot;</span> alt<span style="color:#555555">=</span><span style="color:#1861a7">&quot;dripping lemon&quot;</span> <span style="color:#555555">/&gt;&lt;/</span>li<span style="color:#555555">&gt;</span>
   <span style="color:#555555">&lt;/</span>ul<span style="color:#555555">&gt;</span>
<span style="color:#555555">&lt;/</span>div<span style="color:#555555">&gt;</span>

<span style="color:#555555">&lt;</span>a href<span style="color:#555555">=</span><span style="color:#1861a7">&quot;#&quot;</span> <span style="color:#ff3030">class</span><span style="color:#555555">=</span><span style="color:#1861a7">&quot;change_link&quot;</span> onclick<span style="color:#555555">=</span><span style="color:#1861a7">&quot;$('.slideshow').blinds_change(0)&quot;</span><span style="color:#555555">&gt;</span><span style="color:#32ba06">1</span><span style="color:#555555">&lt;/</span>a<span style="color:#555555">&gt;</span>
<span style="color:#555555">&lt;</span>a href<span style="color:#555555">=</span><span style="color:#1861a7">&quot;#&quot;</span> <span style="color:#ff3030">class</span><span style="color:#555555">=</span><span style="color:#1861a7">&quot;change_link&quot;</span> onclick<span style="color:#555555">=</span><span style="color:#1861a7">&quot;$('.slideshow').blinds_change(1)&quot;</span><span style="color:#555555">&gt;</span><span style="color:#32ba06">2</span><span style="color:#555555">&lt;/</span>a<span style="color:#555555">&gt;</span>
<span style="color:#555555">&lt;</span>a href<span style="color:#555555">=</span><span style="color:#1861a7">&quot;#&quot;</span> <span style="color:#ff3030">class</span><span style="color:#555555">=</span><span style="color:#1861a7">&quot;change_link&quot;</span> onclick<span style="color:#555555">=</span><span style="color:#1861a7">&quot;$('.slideshow').blinds_change(2)&quot;</span><span style="color:#555555">&gt;</span><span style="color:#32ba06">3</span><span style="color:#555555">&lt;/</span>a<span style="color:#555555">&gt;</span>
<span style="color:#555555">&lt;</span>a href<span style="color:#555555">=</span><span style="color:#1861a7">&quot;#&quot;</span> <span style="color:#ff3030">class</span><span style="color:#555555">=</span><span style="color:#1861a7">&quot;change_link&quot;</span> onclick<span style="color:#555555">=</span><span style="color:#1861a7">&quot;$('.slideshow').blinds_change(3)&quot;</span><span style="color:#555555">&gt;</span><span style="color:#32ba06">4</span><span style="color:#555555">&lt;/</span>a<span style="color:#555555">&gt;</span>
<span style="color:#555555">&lt;</span>a href<span style="color:#555555">=</span><span style="color:#1861a7">&quot;#&quot;</span> <span style="color:#ff3030">class</span><span style="color:#555555">=</span><span style="color:#1861a7">&quot;change_link&quot;</span> onclick<span style="color:#555555">=</span><span style="color:#1861a7">&quot;$('.slideshow').blinds_change(4)&quot;</span><span style="color:#555555">&gt;</span><span style="color:#32ba06">5</span><span style="color:#555555">&lt;/</span>a<span style="color:#555555">&gt;</span>
<span style="color:#555555">&lt;</span>a href<span style="color:#555555">=</span><span style="color:#1861a7">&quot;#&quot;</span> <span style="color:#ff3030">class</span><span style="color:#555555">=</span><span style="color:#1861a7">&quot;change_link&quot;</span> onclick<span style="color:#555555">=</span><span style="color:#1861a7">&quot;$('.slideshow').blinds_change(5)&quot;</span><span style="color:#555555">&gt;</span><span style="color:#32ba06">6</span><span style="color:#555555">&lt;/</span>a<span style="color:#555555">&gt;</span>
<span style="color:#555555">&lt;</span>a href<span style="color:#555555">=</span><span style="color:#1861a7">&quot;#&quot;</span> <span style="color:#ff3030">class</span><span style="color:#555555">=</span><span style="color:#1861a7">&quot;change_link&quot;</span> onclick<span style="color:#555555">=</span><span style="color:#1861a7">&quot;$('.slideshow').blinds_change(6)&quot;</span><span style="color:#555555">&gt;</span><span style="color:#32ba06">7</span><span style="color:#555555">&lt;/</span>a<span style="color:#555555">&gt;</span>
</pre>
		
		</div>
		<br/>
		<div class="code">
			<div class="title">Javascript</div>
<pre style="color:#330066; background-color:#ffffff; font-size:10pt; font-family:'Courier New';">$<span style="color:#555555">(</span>window<span style="color:#555555">).</span><span style="color:#d11ced">load</span><span style="color:#555555">(</span><span style="color:#ff3030">function</span> <span style="color:#555555">() {</span>
    $<span style="color:#555555">(</span><span style="color:#1861a7">'.slideshow'</span><span style="color:#555555">).</span><span style="color:#d11ced">blinds</span><span style="color:#555555">();</span>
<span style="color:#555555">})</span>
</pre>
	</div>


		<script type="text/javascript">
			$(window).load(function () {
				// start the slideshow
				$('.slideshow').blinds();
			})
		</script>
	</div>
</body>
</html>

JS代码(jquery.blinds-0.9.js):

/*! * jQuery Blinds * http://www.littlewebthings.com/projects/blinds * * Copyright 2010,Vassilis Dourdounis * * Permission is hereby granted,free of charge,to any person obtaining a copy * of this software and associated documentation files (the "Software"),to deal * in the Software without restriction,including without limitation the rights * to use,copy,modify,merge,publish,distribute,sublicense,and/or sell * copies of the Software,and to permit persons to whom the Software is * furnished to do so,subject to the following conditions:* * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR * IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER * LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */
(function($){
	$.fn.blinds = function (options){
	$(this).find('li').hide();
	$(this).addClass('blinds_slideshow');
	settings ={
}
;
	settings.tile_orchestration = this.tile_orchestration;
	settings.h_res = 12;
	settings.v_res = 1;
	settings.width = $(this).find('li:first').width();
	settings.height = $(this).find('li:first').height();
	jQuery.extend(settings,options);
	tiles_width = settings.width / settings.h_res;
	tiles_height = settings.height / settings.v_res;
	// Get image listblinds_images = [];
	$(this).find('img').each(function (i,e){
	blinds_images[blinds_images.length] ={
	'title':e.alt,'src':e.src}
}
);
	// Create blinds_container$(this).append('<div class="blinds_container"></div>');
	blinds_container = $(this).find('.blinds_container');
	blinds_container.css({
	'position':'relative','display':'block','width':settings.width,'height':settings.height,//'border':'1px solid red',// debuging'background':'transparent url("' + blinds_images[1]['src'] + '") 0px 0px no-repeat'}
);
	// Setup tilesfor (i = 0;
	i < settings.h_res;
	i++){
	for (j = 0;
	j < settings.v_res;
	j++){
	if (tile = $(this).find('.tile_' + i + '_' + j)){
	h = '<div class="outer_tile_' + i + '_' + j + '"><div class="tile_' + i + '_' + j + '"></div></div>';
	blinds_container.append(h);
	outer_tile = $(this).find('.outer_tile_' + i + '_' + j);
	outer_tile.css({
	'position':'absolute','width':tiles_width,'height':tiles_height,'left':i * tiles_width,'top':j * tiles_height}
)tile = $(this).find('.tile_' + i + '_' + j);
	tile.css({
	'position':'absolute','width':tiles_width,'height':tiles_height,'left':0,'top':0,//'border':'1px solid red',// debuging'background':'transparent url("' + blinds_images[0]['src'] + '") -' + (i * tiles_width) + 'px -' + (j * tiles_height) + 'px no-repeat'}
)jQuery.data($(tile)[0],'blinds_position',{
	'i':i,'j':j}
);
}
}
}
jQuery.data(this[0],'blinds_config',{
	'h_res':settings.h_res,'v_res':settings.v_res,'tiles_width':tiles_width,'tiles_height':tiles_height,'images':blinds_images,'img_index':0,'change_buffer':0,'tile_orchestration':settings.tile_orchestration}
);
}
$.fn.blinds_change = function (img_index){
	// reset all spritesconfig = jQuery.data($(this)[0],'blinds_config');
	for (i = 0;
	i < config.h_res;
	i++){
	for (j = 0;
	j < config.v_res;
	j++){
	$(this).find('.tile_' + i + '_' + j).show().css('background','transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (i * config.tiles_width) + 'px -' + (j * config.tiles_height) + 'px no-repeat');
}
}
$(this).children('.blinds_container').css('background','transparent url("' + blinds_images[img_index]['src'] + '") 0px 0px no-repeat' );
	config.img_index = img_index;
	jQuery.data($(this)[0],'blinds_config',config);
	for (i = 0;
	i < config.h_res;
	i++){
	for (j = 0;
	j < config.v_res;
	j++){
	t = config.tile_orchestration(i,j,config.h_res,config.v_res);
	config = jQuery.data($(this)[0],'blinds_config');
	config.change_buffer = config.change_buffer + 1;
	jQuery.data(this[0],'blinds_config',config);
	$(this).find('.tile_' + i + '_' + j).fadeOut(t,function(){
	blinds_pos = jQuery.data($(this)[0],'blinds_position');
	config = jQuery.data($(this).parents('.blinds_slideshow')[0],'blinds_config');
	$(this).css('background','transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (blinds_pos.i * config.tiles_width) + 'px -' + (blinds_pos.j * config.tiles_height) + 'px no-repeat');
	config.change_buffer = config.change_buffer - 1;
	jQuery.data($(this).parents('.blinds_slideshow')[0],'blinds_config',config);
	if (config.change_buffer == 0){
	//$(this).parent().parent().children().children().css('width',config.tiles_width);
	$(this).parent().parent().children().children().show();
}
}
);
}
}
}
$.fn.tile_orchestration = function (i,j,total_x,total_y){
	return (Math.abs(i-total_x/2)+Math.abs(j-total_y/2))*100;
}
}
)(jQuery);

CSS代码(blinds.css):

.change_link{display:block;width:20px;height:20px;font-size:12pt;background-color:#eee;float:left;margin-right:5px;text-align:center;margin-top:10px;border:1px solid #bbb;text-decoration:none;}

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