Maison >interface Web >js tutoriel >Comment jquery opère la commutation dynamique entre les images et les animations

Comment jquery opère la commutation dynamique entre les images et les animations

php中世界最好的语言
php中世界最好的语言original
2018-04-26 16:55:291780parcourir

Cette fois, je vais vous montrer comment jquery opère la commutation dynamique entre les images et les animations. Quelles sont les précautions pour que jquery opère la commutation dynamique entre les images et les animations. Voici des cas pratiques, jetons un coup d'œil.



<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

jQuery implémente un menu de changement d'onglet coulissant avec effet de glissement

jquery fait glisser la souris sur la table pour trier (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn