How jquery operates dynamic switching between pictures and animations

This time I will show you how to use jquery to dynamically switch between pictures and animations. What are the precautions for jquery to dynamically switch between pictures and animations? The following is a practical case, let’s take a look.

<style type="text/css"> 
#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; 
} 
</style>

<script type="text/javascript"> 
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(&#39;alt&#39;)); 
$("#banner_info").click(function () { 
window.open
($("#banner_list a:first-child").attr(&#39;href&#39;), "_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(&#39;alt&#39;)); 
$("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr(&#39;href&#39;), "_blank") }) 
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); 
$(this).css({ "background": "#be2424", &#39;color&#39;: &#39;#000&#39; }).siblings().css({ "background": "#6f4f67", &#39;color&#39;: &#39;#fff&#39; }); 
}); 
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(&#39;click&#39;); 
} 
</script>

<p id="banner"> 
<p id="banner_bg"> 
</p> 
<!--标题背景--> 
<p id="banner_info"> 
</p> 
<!--标题--> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
<p id="banner_list"> 
<a href=&#39;<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgoneURL"]:""%>&#39; target="_blank"> 
<img src=&#39;<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgone"]:"Images/Singapore.jpg"%>&#39; 
title="" alt="" width="968px" height="293px" border="0" /></a> <a href=&#39;<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtowURL"]:""%>&#39; 
target="_blank"> 
<img src=&#39;<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtow"]:"Images/Malaysia.jpg"%>&#39; 
title="" alt="" width="968px" height="293px" border="0" /></a> <a href=&#39;<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthreeURL"]:""%>&#39; 
target="_blank"> 
<img src=&#39;<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthree"]:"Images/HongKong.jpg"%>&#39; 
title="" alt="" width="968px" height="293px" border="0" /></a> 
<a href=&#39;<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfourURL"]:""%>&#39; target="_blank"> 
<img src=&#39;<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfour"]:"Images/flash4.jpg"%>&#39; 
title="" alt="" width="968px" height="293px" border="0" /></a> 
</p> 
</p>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jQuery implements tab sliding switching menu with slide effect

jquery mouse drags Table to sort (with code)

The above is the detailed content of How jquery operates dynamic switching between pictures and animations. For more information, please follow other related articles on the PHP Chinese website!