Jquery的图片轮换播放资源-CSDN文库

共11个文件

jpg：9个

js：1个

html：1个

需积分: 3 62 浏览量 2008-11-25 09:53:31 上传评论收藏 209KB RAR 举报

在网页设计中，动态效果和用户体验的提升是至关重要的，其中图片轮换播放是一种常见的视觉呈现方式，可以吸引用户注意力并增加网站的交互性。Jquery，作为一个强大的JavaScript库，为实现这样的功能提供了便利。本篇文章将深入探讨如何使用Jquery实现图片轮换播放，并涉及与之相关的Ajax和UI设计。 Jquery简化了JavaScript的DOM操作，使得动态改变HTML元素变得轻而易举。在图片轮换播放的场景下，我们通常需要隐藏、显示或切换不同的图片元素。例如，可以通过`.hide()`和`.show()`方法来控制图片的可见性，或者利用`.fadeOut()`和`.fadeIn()`实现平滑的过渡效果。在描述中提到了"很好用"的Jquery插件，这可能指的是已经封装好的图片轮换解决方案，如Jquery Cycle、Jquery Slider或Bootstrap Carousel等。这些插件通常包含丰富的配置选项，如动画类型、速度、自动播放、导航按钮等，可以满足不同需求。例如，Jquery Cycle插件提供`next()`和`prev()`函数用于切换到下一张或上一张图片，同时支持自定义动画效果。 Ajax在图片轮换中的应用主要体现在动态加载内容上。如果图片数量庞大或者需要根据用户操作实时更新，我们可以利用Ajax异步加载图片，避免页面整体刷新，提高用户体验。通过`$.ajax()`或`$.get()`函数，我们可以从服务器获取新的图片数据，然后利用Jquery操作DOM将新图片插入到轮播组件中。 UI设计方面，良好的图片轮播不仅需要功能完善，还要考虑界面美观和交互友好。这包括合理布局、统一的风格、清晰的指示器（如点状或数字导航）以及易于操作的控制按钮（如左右箭头）。另外，考虑到移动设备的普及，响应式设计也是必不可少的，确保图片轮播在不同屏幕尺寸上都能正常工作。 Jquery提供了一种高效的方法来实现图片轮换播放，结合Ajax可以实现更智能的数据加载，而良好的UI设计则能够提升用户体验。在实际开发中，我们可以根据项目需求选择合适的插件或自定义代码，结合Ajax和UI最佳实践，创建出既实用又美观的图片轮播效果。

资源推荐

资源详情

资源评论

收起资源包目录

jquery图片轮换.rar （11个子文件）

jquery图片轮换

jquery-1.2.6.pack.js 30KB

imgs

5.jpg 24KB

3.jpg 21KB

8.jpg 18KB

4.jpg 19KB

9.jpg 19KB

2.jpg 23KB

1.jpg 23KB

6.jpg 22KB

7.jpg 23KB

index.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="维奇素材网,维奇网,维奇,经典素材,经典素材网,素材站,素材网,网页素材"/> <meta name="description" content="jQuery仿迅雷,图片轮播切换经典素材网,最新;最全;最经典的素材地带!"/> <title>图片轮播切换效果</title> <style type="text/css"> body{background:#FFFFFF;} h1 { color:#fff; margin: 5px 5px;} *{font-size:12px; font-family:Verdana;margin:0;padding:0; color:#fff; } #play img {border:0px} #play {width:346px;height:214px;overflow:hidden;margin: 0 auto; border: 1px solid #fff; padding:4px;} #play_info{position:absolute;margin-top:141px;padding:8px 0 0 20px;height:42px;width:270px;color:#fff;z-index:1001;cursor:pointer} #play_info b{font-size:14px;display:block} #play_bg {position:absolute;background-color:#000;margin-top:141px;height:50px;width:346px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000} #play_text {position:absolute;margin:141px 0 0 296px;height:50px;width:60px;z-index:1002} #play_text ul {list-style-type:none; width:60px;height:50px;display:block;padding-top:1px;_padding-top:0px;filter: Alpha(Opacity=80);opacity:0.8;} #play_text ul li {width:14px;height:14px;float:left;background-color:#000;display:block;color:#FFF;text-align:center;margin:1px;cursor:pointer;font-family:"微软雅黑"; font-size:9px;} #play_list a{display:block;width:346px;height:191px;position:absolute;overflow:hidden} </style> <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> </head> <body> <br /> <br /> <div id="play"> <div id="play_bg"></div> <div id="play_info"></div> <div id="play_text"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div id="play_list"> <a href="#" target="_blank"> <img src="imgs/1.jpg" title="" alt="<b>相恋9年</b>尔冬升再婚娶相恋9年女友" /> </a> <a href="#" target="_blank"> <img src="imgs/2.jpg" title="" alt="<b>恋情变贤</b>周海媚公开6年恋情变贤妇" /> </a> <a href="#" target="_blank"> <img src="imgs/3.jpg" title="" alt="<b>为啥这么</b>“熊猫”阿宝为啥这么红？" /> </a> <a href="#" target="_blank"> <img src="imgs/4.jpg" title="" alt="<b>男友被捕</b>安妮-海瑟薇前男友被捕" /> </a> <a href="#" target="_blank"> <img src="imgs/5.jpg" title="" alt="<b>开价一亿</b>天后王菲“复出”开价一亿" /> </a> <a href="#" target="_blank"> <img src="imgs/6.jpg" title="" alt="<b>赞郑伊健</b>阿Sa赞郑伊健“保存”得好" /> </a> <a href="#" target="_blank"> <img src="imgs/7.jpg" title="" alt="<b>死跑龙套</b>北影演员：甘当‘死跑龙套的’" /> </a> <a href="#" target="_blank"> <img src="imgs/8.jpg" title="" alt="<b>潘玮柏死</b>潘玮柏死盯辣妹脱衣解带" /> </a> <a href="#" target="_blank"> <img src="imgs/9.jpg" title="" alt="<b>张曼玉分</b>尔冬升深爱张曼玉分手发呆" /> </a> </div> </div> <script type="text/javascript"> var t = n = 0, count = $("#play_list a").size(); $(function(){ $("#play_list a:not(:first-child)").hide(); $("#play_info").html($("#play_list a:first-child").find("img").attr('alt')); $("#play_text li:first-child").css({"background":"#fff",'color':'#000'}); $("#play_info").click(function(){window.open($("#play_list a:first-child").attr('href'), "_blank")}); $("#play_text li").click(function() { var i = $(this).text() - 1; n = i; if (i >= count) return; $("#play_info").html($("#play_list a").eq(i).find("img").attr('alt')); $("#play_info").unbind().click(function(){window.open($("#play_list a").eq(i).attr('href'), "_blank")}) $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); $(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'}); }); t = setInterval("showAuto()", 2000); $("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);}); }) function showAuto() { n = n >= (count - 1) ? 0 : ++n; $("#play_text li").eq(n).trigger('click'); } </script> </body> </html>

评论收藏

内容反馈