jquery如何操作图片与动画动态切换

这次给大家带来jquery如何操作图片与动画动态切换，jquery操作图片与动画动态切换的注意事项有哪些，下面就是实战案例，一起来看一下。

 #banner { padding: 5px; position: relative; width: 968px; height: 293px; /*border: 1px solid #666;*/ overflow: hidden; font-size: 16px; } #banner_list img { border: 0px; } #banner_bg { margin-bottom: 5px; position: absolute; bottom: 0; background-color: #000; height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 968px; } #banner_info { position: absolute; bottom: 4px; left: 0px; height: 22px; color: #fff; z-index: 1001; cursor: pointer; } #banner_text { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px; } #banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 10px; right: 5px; height: 20px; } #banner ul li { padding: 0 8px; line-height: 18px; float: left; display: block; color: #FFF; border: #e5eaff 1px solid; background-color: #6f4f67; cursor: pointer; margin: 0; font-size: 16px; } #banner_list a { /* position: absolute;*/ width: 968px; height: 293px; margin: 0px; padding: 0px; } #banner_list { margin: 0px; padding: 0px; width: 968px; height: 293px; border: #e7e7e7 1px solid; } 

登录后复制

 var t = n = 0, count; $(function () { count = $("#banner_list a").length; $("#banner_list a:not(:first-child)").hide(); $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt')); $("#banner_info").click(function () { window.open($("#banner_list a:first-child").attr('href'), "_blank") }); $("#banner li").click(function () { var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4 n = i; if (i >= count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr('href'), "_blank") }) $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); $(this).css({ "background": "#be2424", 'color': '#000' }).siblings().css({ "background": "#6f4f67", 'color': '#fff' }); }); t = setInterval("showAuto()", 4000); $("#banner").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });//4秒钟切换一张图片}); function showAuto() { n = n >= (count - 1) ? 0 : ++n; $("#banner li").eq(n).trigger('click'); } 

登录后复制

登录后复制 1 2 3 4  

 ‘ target=”_blank”> ‘ title=”” alt=”” width=”968px” height=”293px” border=”0″ /> ‘ target=”_blank”> ‘ title=”” alt=”” width=”968px” height=”293px” border=”0″ /> ‘ target=”_blank”> ‘ title=”” alt=”” width=”968px” height=”293px” border=”0″ /> ‘ target=”_blank”> ‘ title=”” alt=”” width=”968px” height=”293px” border=”0″ /> 

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

jQuery实现有幻灯效果tab滑动切换菜单

jquery鼠标拖动Table进行排序（附代码）

以上就是jquery如何操作图片与动画动态切换的详细内容，更多请关注【创想鸟】其它相关文章！