jQuery-Vollbild-Bildkarussell-Spezialeffektcode-Sharing mit Fortschritt bar

jQuery-Vollbild-Bildkarussell-Spezialeffektcode-Sharing mit Fortschritt bar_jquery

WBOY

Freigeben： 2016-05-16 15:39:13

Original

1234 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den jQuery-Vollbild-Bildkarusselleffekt mit Fortschrittsbalken. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der von jQuery implementierte Vollbild-Bildkarusselleffekt mit Fortschrittsbalken ist ein Spezialeffektcode für die offizielle Homepage der Oppo-Handy-Website mit Fortschrittsbalken. Vollbild-Bildkarussell, implementiert auf Basis von jQuery, der einen großartigen, prägnanten und eleganten Effekt erzielt
运行效果图: ------------ --------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

(1) Führen Sie den CSS-Stil im Kopfbereich ein:

(2) js-Code:

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

Nach dem Login kopieren

Der für Sie freigegebene jQuery-Vollbild-Bildkarussell-Spezialeffektcode mit Fortschrittsbalken lautet wie folgt

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

Nach dem Login kopieren

Das Obige ist der mit Ihnen geteilte jQuery-Vollbild-Bildkarussell-Spezialeffektcode mit Fortschrittsbalken. Ich hoffe, er gefällt Ihnen und Sie können ihn in der Praxis anwenden.