jQuery 全画面画像カルーセル特殊効果コードの進行状況との共有 bar

jQuery 全画面画像カルーセル特殊効果コードの進行状況との共有 bar_jquery

WBOY

リリース： 2016-05-16 15:39:13

オリジナル

1234 人が閲覧しました

この記事の例では、プログレスバーを備えた 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 の全画面画像カルーセル特殊効果コードは次のとおりです





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