jQuery淡入淡出的横向左右拉动切换特效

发布时间：2018-08-18 22:27:57 所属栏目：Asp教程来源：站长网

导读：一款横向左右拉动式的图片切换的特效，切换时有淡入淡出效果，基于 jQuery 框架完成，现在很多特效都是在jquery框架下开发实现的，如果你的网站还不赶紧引入它，就OUT啦！为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别

　　一款横向左右拉动式的图片切换的特效，切换时有淡入淡出效果，基于jQuery框架完成，现在很多特效都是在jquery框架下开发实现的，如果你的网站还不赶紧引入它，就OUT啦！

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

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gbk"> <title>JS实现的Slideshow With jQuery,横向拉动左右滚动式切换 - 烈火网</title> <style type="text/css"> #slide { height: 284px; margin: 50px auto 100px; overflow: hidden; position: relative; width: 480px; box-shadow: 3px 3px 6px #333333; } body.js .demo_slide { position: absolute; } .demo_slide { height: 284px; width: 480px; } </style> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> window.onload = function(){ $('body').addClass('js'); initDemopageSlides(); } function initDemopageSlides(){ demo_slide_animation_speed = 800; demo_slide_animation_timeout = 4000; if($('.demo_slide').length <= 1) return; $("#slide_next").click(onSlideNextClick); $("#slide_prev").click(onSlidePrevClick); var first_slide = $(".demo_slide:first"); first_slide.addClass("current"); var zIndexNumber = 100; $('.demo_slide').each(function() { $(this).css('zIndex', zIndexNumber); zIndexNumber -= 1; }); onSlideAnimationComplete(); } function shuffleArray(v){ for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x); return v; }; function onSlideNextClick(event){ navigateSlides(1); } function onSlidePrevClick(event){ navigateSlides(-1); } function navigateSlides(distance){ clearTimeout(time_out); if(animationInProgress) return; var slides_arr = $(".demo_slide"); for(var s=0; s < slides_arr.length; s++){ if($(slides_arr[s]).hasClass("current")){ var previous_slide = $(slides_arr[s]); previous_slide.removeClass("current"); break; } } var next_index = s + distance; if(next_index < 0) next_index += slides_arr.length; if(next_index >= slides_arr.length) next_index = 0; var next_slide = $(slides_arr[next_index]); next_slide.addClass("current"); var previous_zIndex = $(previous_slide).css('zIndex'); next_slide.css('zIndex', Number(previous_zIndex) + 10); animationInProgress = true; var slide_width = parseFloat(next_slide.css("width")); next_slide.css(next_index%2?"right":"left",(slide_width * distance)/4 + "px"); next_slide.css("display","block"); next_slide.css("opacity","0"); if(next_index%2){ next_slide.animate( {right:0, opacity:1}, demo_slide_animation_speed, onSlideAnimationComplete); } else { next_slide.animate( {left:0, opacity:1}, demo_slide_animation_speed, onSlideAnimationComplete); } } function onSlideAnimationComplete(){ animationInProgress = false; time_out = setTimeout (onSlideNextClick,demo_slide_animation_timeout); } </script> </head> <body> <div id="slide"> <img class="demo_slide" src="/uploads/common/images/wall7.jpg"> <img class="demo_slide" src="/uploads/common/images/wall8.jpg"> <img class="demo_slide" src="/uploads/common/images/wall9.jpg"> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：武汉站长网）

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

ASP建成不重复随机数的	ASP.NET Web Page应用
WEB页面多语言支持解决	获取转向地址的URL的源