jQuery:热点图片轮换展示效果 ---- Hiro技术站

分享到

新浪微博

豆瓣

QQ空间

Twitter

jQuery:热点图片轮换展示效果

分类:jQuery, 案例分享发表时间:2009年08月28日字体大小:12号 14号

分享一个我做的图片轮换展示效果，主要实现原理：通过设置非第一个图片的position，通过overflow:hidden属性隐藏，再使用jQuery的animate效果函数作出链性轮换的效果。

轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件，喜欢修改的朋友可以自行修改！另压缩包中的源码没有添加注释，不懂的请阅读本文中的注释。

PS：jQuery库请根据源码的路径自行加入，压缩包中不提供下载。

1.Html代码：

<div id="imgs">
        <div class="top"></div>
        <div class="mid">
            <ul>
                <li class="first"><a href="#"><img src="images/1.jpg" alt="1" /></a></li>
                <li><a href="#"><img src="images/2.jpg" alt="2" /></a></li>
                <li><a href="#"><img src="images/3.jpg" alt="3" /></a></li>
                <li><a href="#"><img src="images/4.jpg" alt="4" /></a></li>
            </ul>
            <div id="img_list">
            	<a href="#1" class="active">1</a>
            	<a href="#2">2</a>
            	<a href="#3">3</a>
            	<a href="#4">4</a>
            </div>
        </div>
        <div class="btm"></div>
    </div>

2.Css代码：

* { margin:0; padding:0;}
body { font:12px; padding:100px 200px;}
ul { list-style:none;}
img { padding:2px; border:1px solid #eee;}
a { outline:none;}
 
#imgs { width:500px; float:left; margin-bottom:10px;}
.top, .btm { background:url(images/sprite.gif) no-repeat; overflow:hidden;}
.top { background-position:0 0; height:5px;}
.btm { background-position:0 -5px; height:7px;}
 
.mid { width:486px; background:url(images/bg_img.gif) repeat-y; padding:5px 7px 0;}
.mid ul { width:486px; height:186px; background:#fff; position:relative; overflow:hidden;}
.mid ul li { width:486px; height:186px; position:absolute; left:490px; top:0;}
.mid ul li.first { left:0;}
 
#img_list { width:486px; height:20px; padding-top:5px; overflow:hidden; height:1%;}
#img_list a { display:block; width:14px; height:14px; text-indent:-9999px; float:left; margin-right:5px; background:url(images/sprite.gif) no-repeat 0 -13px;}
#img_list a:hover, #img_list a.active { background-position:-14px -13px;}

3.jQuery代码：

/* start ----- play img*/
var curr = 0, next = 0, count = 0;
$(document).ready(function() {
        // 记录图片的数量	
	count = $('#img_list a').size();	
 
	t = setInterval('imgPlay()', 3000);
 
        // 鼠标移动到图片或导航上停止播放，移开后恢复播放	
	$('#imgs li, #img_list a').hover(function() {
		clearInterval(t);
	}, function() {
		t = setInterval('imgPlay()', 3000);
	});
 
	//点击导航播放到相应的图片		
	$('#img_list a').click(function() {
                // index()函数返回当前导航的下标
		var index = $('#img_list a').index(this);
		if(curr != index) {
			play(index);
			curr = index;
		};
			return false;
		});	
	});
 
	// 播放图片的函数
	var imgPlay = function() {
		next = curr + 1;
                // 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标
		if(curr == count-1) next=0;
		play(next);
 
		curr++;
                // 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1
		if(curr > count-1) { curr=0; next = curr +1; }
	};
 
	// 控制播放效果的函数
	var play = function(next) {
                // 当前的图片滑到左边-500px，完成后返回到右边490px
                // 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上
		$('#imgs li').eq(curr).css({'opacity': '0.5'}).animate({'left': '-500px', 'opacity': '1'}, 'slow', function() {
				$(this).css({'left': '490px'});
			}).end()
			.eq(next).animate({'left': '0px', 'opacity': '1'}, 'slow', function() {
				$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
			});
};
/* endof ----- play img*/