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>