专注于高品质PHP技术等信息服务于一体 [STIEMAP] [RSS]

百度提供的广告:
JSCSS
当前位置:首页 > 技术文档 > JSCSS >  > 
Jquery手写的Flash幻灯特效
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<!-- jquery 首页flash 特效 -->
<script  language="javascript">
$(document).ready(function() {

//初始化
$("#f_img img").attr("src",$(".img_case img").first().attr("src"));
$("#f_text").text($(".img_case img").first().attr("alt"));	
//图片切换
$(".img_case img").hover(function(){
$("#f_img img").fadeOut("slow");
$("#f_img img").attr("src",$(this).attr("src"));
$("#f_img img").fadeIn("slow");
$("#f_text").text($(this).attr("alt"));	
},function(){});
//图片点击
$(".img_case img").click(function(){
$("#f_img img").attr("src",$(this).attr("src"));
$("#f_text").text($(this).attr("alt"));	
});
//左右滑动
var currentPosition = 0;
var imgmaxsize=140;
$(".img_case").wrapAll('<div id="movediv"></div>');
$(".button img").click(function (){
if($(this).attr("src")=="/templets/skin/images/index_flash_float_bg_left.jpg")
{
	if(currentPosition>-imgmaxsize){
	$("#movediv").animate({
      'marginLeft' : currentPosition-=140
    });
	
	}
	
}
else 
{
	if(currentPosition<0){
	$("#movediv").animate({
      'marginLeft' : currentPosition+=140
    });
	
	}
	
}

});

});

</script>
<div class="flash">
<div id="flash">
<div id="f_img">
<img src="" /><div id="f_text"></div>
</div>
<div class="folat_img">
<div class="button">
<img src="/templets/skin/images/index_flash_float_bg_left.jpg">
</div>
<div class="folat_img_case">

<div class="img_case">
<img src="/templets/skin/images/flash_1.jpg" alt="世纪龙腾黑色时尚简约家具"/>
</div>

<div class="img_case">
<img src="/templets/skin/images/flash_2.jpg" alt="世纪龙腾黑色时尚卧室"/>
</div>
<div class="img_case">
<img src="/templets/skin/images/flash_3.jpg" alt="世纪龙腾黑色时尚客厅"/>
</div>
<div class="img_case">
<img src="/templets/skin/images/flash_4.jpg" alt="世纪龙腾金色时尚卧室"/>
</div>
<div class="img_case">
<img src="/templets/skin/images/flash_5.jpg" alt="世纪龙腾红色时尚卧室"/>
</div>
</div>

<div class="button">
<img src="/templets/skin/images/index_flash_float_bg_right.jpg">
</div>
</div>
</div>