Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 15:39:13
Original
1266 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.
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage