진행률 bar_jquery와 jQuery 전체 화면 그림 캐러셀 특수 효과 코드 공유

이 기사의 예에서는 진행률 표시줄이 포함된 jQuery 전체 화면 이미지 회전식 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
jQuery로 구현된 진행률 표시줄이 있는 전체 화면 사진 회전식 효과는 jQuery를 기반으로 구현된 진행률 표시줄 전체 화면 사진 회전식 이미지가 있는 Oppo 휴대폰 공식 웹사이트의 특수 효과 코드로, 웅장하고 간결하며 우아한 효과를 얻을 수 있습니다
运行效果图：                 ------查看效果 下载源码------------ --------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
(1) 헤드 영역에 CSS 스타일을 도입합니다:

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

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

진행률 표시줄이 포함된 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、傲游、搜狗、世界之窗.

위 내용은 진행률 표시줄이 포함된 jQuery 전체 화면 이미지 캐러셀 특수 효과 코드입니다. 마음에 드시고 실제로 적용해 보시길 바랍니다.