jQuery图片切换代码，响应鼠标滑动效果

发布时间：2018-08-19 02:09:00 所属栏目：Asp教程来源：站长网

导读：jQuery 图片切换代码，响应鼠标滑动效果！您第一眼看到这个效果时也许会以为是flash实现的，当你右击时就会明白不是Flash了，这是jQuery结合CSS和图片完成的，动态切换、还可以显示文字标题！为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷

　　jQuery图片切换代码，响应鼠标滑动效果！您第一眼看到这个效果时也许会以为是flash实现的，当你右击时就会明白不是Flash了，这是jQuery结合CSS和图片完成的，动态切换、还可以显示文字标题！

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <title>jQuery实例：图片滑动切换展示效果 - 烈火网 Liehuo.NET</title> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <div id="cnblogs_post_body"> <style type="text/css"> #photoshow{ border: solid 1px #c5e88e; overflow: hidden; /*图片超出DIV的部分不显示*/ width: 580px; height: 169px; background: #c5e88e; position: absolute; } .photo{ position: absolute; top: 0px; width: 490px; height: 169px; } .photo img{ width: 490px; height: 169px; } .photo span{ padding: 5px 0px 0px 5px; width: 490px; height: 30px; position: absolute; left: 0px; bottom: -32px; /*介绍内容开始的时候不显示*/ background: black; filter: alpha(opacity=50); /*IE透明*/ opacity: 0.5; /*FF透明*/ color: #ffffff; } </style> <p>开始之前，我就喜欢先看一下效果：</p><br> <div> <div id="photoShow"> <div class="photo"><img alt="" src="/uploads/common/images/1.jpg"> <span>A 烈火网演示图片第一张</span> </div> <div class="photo"><img alt="" src="/uploads/common/images/2.jpg"> <span>B 烈火网演示图片第二张</span> </div> <div class="photo"><img alt="" src="/uploads/common/images/3.jpg"> <span>C 烈火网演示图片第三张</span> </div> <div class="photo"><img alt="" src="/uploads/common/images/4.jpg"> <span>D 烈火网演示图片第四张</span> </div> <div class="photo"><img alt="" src="/uploads/common/images/5.jpg"> <span>E 烈火网演示图片第止张</span> </div></div></div> <script type="text/javascript"> $(document).ready(function(){ var imgDivs = $("#photoShow>div"); var imgNums = imgDivs.length; //图片数量 var divWidth = parseInt($("#photoShow").css("width")); //显示宽度 var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度 var minWidth = (divWidth - imgWidth)/(imgNums-1); //显示其中一张图片时其他图片的显示宽度 var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //图片介绍信息的高度 imgDivs.each(function(i){ $(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)}); $(imgDivs[i]).hover(function(){ //$(this).find("img").css("opacity","1"); $(this).find("span").stop().animate({bottom: 0}, "slow"); imgDivs.each(function(j){ if(j<=i){ $(imgDivs[j]).stop().animate({left: j*minWidth}, "slow"); }else{ $(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow"); } }); },function(){ imgDivs.each(function(k){ //$(this).find("img").css("opacity","0.7"); $(this).find("span").stop().animate({bottom: -spanHeight}, "slow"); $(imgDivs[k]).stop().animate({left: k*(divWidth/imgNums)}, "slow"); }); }); }); }); </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!