自动播放的jQuery幻灯片

最新推荐文章于 2024-11-14 10:50:47 发布

原创最新推荐文章于 2024-11-14 10:50:47 发布 · 210 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #JavaScript #ViewUI

jquery 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的图片轮播效果，通过设置图片透明度和位置变化，达到平滑过渡的效果。同时，提供了鼠标悬停时切换图片的功能。

来看下效果图：

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var theInt = null;
var curclicked = 0;

$(function(){
	autoPlay();
})

function autoPlay(){
$('#transparence').css('opacity','0.4');
	$('#pic_list img').css({'opacity':'0.6'});
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	$('#pic_list a').click(function(){return false});
	t(0);
	$('#pic_list img').mouseover(function(){
		if($('#big_pic').attr('src') == $(this).attr('src')) return;
		t($('#pic_list img').index($(this)));
	});
}

  t = function(i){
	clearInterval(theInt);
	if( typeof i != 'undefined' )
    curclicked = i;
		$('#big_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#big_imgs').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#big_imgs').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:15,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:15,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
    theInt = setInterval(function (){
      i++;
      if (i > $('#pic_list img').length - 1) {i = 0};
      $('#big_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
      $('#big_imgs').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
      $('#big_imgs').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
      $('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:15,opacity:0.6},500);
      $('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:15,opacity:0.6},500);
      $('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
    },3000)
}
</script>

<style type="text/css">
body,div,ul,li { margin:0; padding:0;}
#autoplay { position:relative; width:342px; height:228px;} 
#transparence { position:absolute; left:0; bottom:0; width:100%; height:37px; border-top:1px solid #fff; background:#000; z-index:1;}  
#pic_list { position:absolute; left:0; bottom:0; list-style:none; overflow:hidden; z-index:2;} 
#pic_list li { float:left; width:39px; height:37px; padding-top:10px;margin:0 3px;}
#pic_list li img { position:absolute; top:15px; width:37px; height:25px; border:1px solid #fff;} 
#big_pic { position:absolute; width:100%; height:100%; border:none;}
</style>

<div id="autoplay">
	<a href="http://ice-cream.iteye.com/picture/8308" id="big_imgs"><img src="http://ice-cream.iteye.com/upload/picture/pic/8308/fe1bdce7-17d9-35c6-90a9-8cdf961df3e4.jpg" id="big_pic" alt=""></a>
	<ul id="pic_list">
		<li><a href="http://ice-cream.iteye.com/picture/8308"><img src="http://ice-cream.iteye.com/upload/picture/pic/8308/fe1bdce7-17d9-35c6-90a9-8cdf961df3e4.jpg" alt=""></a></li>
		<li><a href="http://ice-cream.iteye.com/picture/13325"><img src="http://ice-cream.iteye.com/upload/picture/pic/13325/3aeca676-fc57-3c9a-9407-70eeaf6ea84e.jpg" alt=""></a></li>
		<li><a href="http://ice-cream.iteye.com/picture/8352"><img src="http://ice-cream.iteye.com/upload/picture/pic/8352/1b6561c4-4a0b-39df-982b-322d6650b553.jpg" alt=""></a></li>
	</ul>
	<span id="transparence"></span>
</div>

demo code download