jQuery を手動でクリックして画像カルーセル効果を実装する

jQuery を手動でクリックして画像カルーセル効果を実装する_jquery

WBOY

リリース： 2016-05-16 15:26:37

オリジナル

1314 人が閲覧しました

この記事では、スキルを練習するためにカルーセル画像を書きました。次に、カルーセルを手動でクリックするカルーセル画像と、動きを停止するマウスオーバー画像をゆっくりと深く書いていきます。カルーセルの画像。
最終的な手動クリックによるカルーセル効果を見てみましょう:

1.原理説明

(1) 1 つ目は、一番外側の大きな div を使用して 2 つの小さな div をラップし、4 つの画像を 1 つの小さな div に配置し、4 つの数字ボタンをもう 1 つの小さな div に配置します。 >

(2) 一番外側の大きな div の幅を画像の幅に設定します。ただし、画像を保持する小さな div の幅を 2000px に設定します。大きいものは、4 つの画像の左フローティングを容易にします

。

(3) 数字ボタンがクリックされたときに、ボタンのインデックス値を取得します。これにより、各画像がどれだけの幅で左に移動するかを知ることができます

上の画像からわかるように、4 つの画像はフローティング水平レイアウトになっており、数字ボタンをクリックすると、画像は数値のインデックス値に従って N 個の画像の幅を親フレームに移動します。親枠外の画像は非表示になりますのでボタンをクリックしてください~~~~~それでも原理が分からないなら血を吐くしかありません~~~~

2. メインプログラムを見てみましょう

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

ログイン後にコピー

上記のレイアウトを原理で説明しましたので、興味があればご自身で原理を読んでください~~~~

3. 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;
}

ログイン後にコピー

上記のスタイルで重要な点をメモしましたが、基本的な知識があれば簡単に理解できると思います。後続の jquery プログラムのイメージが移動できなくなりました。このエラーを見つけるのに時間がかかりました。皆さんもここに注目していただければ幸いです~~~~~~

4. jQuery プログラム

$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮被点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   ul.animate({
    "left":-oneWidth*index, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
   })
  })
})

ログイン後にコピー

これは非常に簡単だと思いますか? ほんの数語で手動クリックのカルーセル効果を実現できます。上記のプログラムで注意する必要があるのは、left 属性が左に移動されることです。負の値です~~~~~~~

自動カルーセル効果については次の記事で紹介しますので、お見逃しなくお願いします。