Partage de code d'effets spéciaux de carrousel d'images plein écran jQuery avec barre de progression_jquery

L'exemple de cet article décrit l'effet carrousel d'images plein écran jQuery avec barre de progression. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
L'effet carrousel d'images plein écran avec barre de progression implémenté par jQuery est un code d'effet spécial pour la page d'accueil du site officiel du téléphone mobile Oppo avec carrousel d'images plein écran avec barre de progression implémenté sur la base de jQuery, qui permet d'obtenir un effet grandiose, concis et élégant
运行效果图：                  -------------------查看效果 下载源码----------- ---------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
(1) Introduisez le style CSS dans la zone d'en-tête :

link rel="stylesheet" type="text/css" href="css/style.css">

(2) code js :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i=0;
jummper();
function jummper(){
 $(".pic ul li").eq(i).find("img").css("left","-1180px");
 $(".pic ul li").eq(i).find("p").css("width","0px");
 $(".pic ul li").eq(i).find("img").animate({left:"0px"},500,function(){
 //当图片移动完成后再加载进度条
 //alert("当图片移动完成后再做操作");
 $(".pic ul li").eq(i).find("p").animate({width:"1174px"},8000,function(){
 $(".pic ul li").eq(i).find("img").animate({left:"1180px"},500,function(){
 i++;
 if(i>2)
 i=0;
 $(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
 });
 });
 });
}
setInterval("jummper()",9100);
</script>

Le code des effets spéciaux du carrousel d'images plein écran jQuery avec barre de progression partagée avec vous est le suivant

 

 

 
 

 

 
 

 
 

 

 
 

 
 

 

 
 


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i=0;
jummper();
function jummper(){
 $(".pic ul li").eq(i).find("img").css("left","-1180px");
 $(".pic ul li").eq(i).find("p").css("width","0px");
 $(".pic ul li").eq(i).find("img").animate({left:"0px"},500,function(){
 //当图片移动完成后再加载进度条
 //alert("当图片移动完成后再做操作");
 $(".pic ul li").eq(i).find("p").animate({width:"1174px"},8000,function(){
 $(".pic ul li").eq(i).find("img").animate({left:"1180px"},500,function(){
 i++;
 if(i>2)
 i=0;
 $(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
 });
 });
 });
}
setInterval("jummper()",9100);
</script>


适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

Ce qui précède est le code d'effet spécial du carrousel d'images plein écran jQuery avec barre de progression partagé avec vous. J'espère que vous pourrez l'aimer et l'appliquer dans la pratique.