ホームページ > 記事 > ウェブフロントエンド > jquery はスケジュールされた自動カルーセル効果を実装します_jquery

jquery はスケジュールされた自動カルーセル効果を実装します_jquery

WBOYオリジナル: 2016-05-16 15:26:361910ブラウズ

このカルーセル画像は、以前の記事 画像カルーセル効果を実現するための jQuery 手動クリック 、つまり、今回示されているのは、クリックカルーセル効果のための手動プログラムと、スケジュールされた自動カルーセル効果を継続的に学びたい友達は、私の以前の記事を読んでからこの記事を読むことをお勧めします~~~~

最終的にスケジュールされた自動カルーセル効果と手動クリックによるカルーセル効果を見てみましょう:

上記の表示アニメーションが速い理由は、私のスクリーンショットソフトウェアが無料の緑色バージョンであるためです~~~実際の効果はこの速度よりも遅く、まだ均一です。 ~~~そのため、上記の表示アニメーションは完成したエフェクトの参考としてのみ使用できます。
1. メインプログラム

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>轮播图①（手动点击轮播）</title>
  <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
  <div class="slideShow">
   <!--图片布局开始-->
   <ul>
    <li><a href="#"><img src="img/picture01.jpg" /></a></li>
    <li><a href="#"><img src="img/picture02.jpg" /></a></li>
    <li><a href="#"><img src="img/picture03.jpg" /></a></li>
    <li><a href="#"><img src="img/picture04.jpg" /></a></li>
   </ul>
   <!--图片布局结束-->
   
   <!--按钮布局开始-->
   <div class="showNav">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
   </div>
   <!--按钮布局结束-->
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/layout.js"></script>
 </body>
</html>

まあ、上記のメインプログラムは前の記事と何ら変わりはなく、何も変更されていません~~~~~ 興味があれば、最初の記事をチェックしてください。今回の私のエッセイの焦点は次のとおりです。 Jquery プログラム
上 2. CSS スタイル

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px;  /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative;  /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
 float: left;  /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{  /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

3. jQuery プログラム
まず、スケジュールされた 自動ローテーションの原理について説明します:
1. まず、タイマーを開始する必要があります。タイマー時間が 2000 ミリ秒に設定されているとします。つまり、2S タイマーが操作
を実行するとします。 2. 2 秒ごとにタイマーによって実行される操作は、数字ボタンの連続クリックをシミュレートすることです。つまり、クリックイベントをトリガーして画像を左に移動します
一般的な効果を実現するために、まず jQuery コード 1 を見てみましょう。

 var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
  },2000); //2000为轮播的时间

上記のプログラムは 2 秒ごとに画像のカルーセル効果を実現できますが、iNow が最後の画像に到達したかどうかを判断しないため、カルーセルは最後の画像に到達すると停止します。そのため、次の

コードは次のとおりです。 :

var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间

jQuery プログラムの完全なコードプログラムは次のとおりです:

$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})

上記のコメントは、主に学びたい友人の便宜のために非常に詳細に書かれていますが、実際には、私がプログラムを書くとき、それらはすべて非常に単純な内容であるかもしれません。これを見たら、jQuery プログラムは終了したと思います。これは大きな間違いです。自動カルーセル効果は正しいのですが、手動でクリックするとエラーが発生します。エラー効果を示すために特別に Gif アニメーションを作成しました。

上記の効果を見ると、写真が自動的に回転するとき、ボタンをクリックしてもエコーするだけで、クリックしたボタンにジャンプするだけですが、押しただけではまだ回転していることに突然気づきます。順番はカルーセルの順番に関係なく、ボタンをクリックしてから行ってください。

理由は

これは、手動でクリックしたときのインデックス値がタイマーの画像インデックス iNow に割り当てられていないためです。そのため、iNow はクリックしたボタンのインデックス値を保存できません。つまり、どのボタンをクリックしたかがわかりません。理由を確認したら、以下を変更する必要があります。

変更後の jQuery プログラムの最終バージョンは次のとおりです:

$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   iNow=index;
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})

以上がこの記事の全内容です。次回は、マウスがカルーセル画像上にあるときに画像の回転を停止し、マウスを離した後も回転し続けるコードを紹介します。立ち去らないでください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：AngularJS は手動フォーム検証と自動フォーム検証を実装します_AngularJS次の記事：AngularJS は手動フォーム検証と自動フォーム検証を実装します_AngularJS

続きを見る

jquery はスケジュールされた自動カルーセル効果を実装します_jquery

関連記事