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

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

WBOY

Libérer： 2016-05-16 15:39:13

original

1326 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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





jQuery带进度条全屏图片轮播代码








 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


<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、傲游、搜狗、世界之窗.

Copier après la connexion

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.