jQuery clique manuellement pour obtenir des effets de carrousel d'images

jQuery clique manuellement pour obtenir des effets de carrousel d'images_jquery

WBOY

Libérer： 2016-05-16 15:26:37

original

1310 Les gens l'ont consulté

Dans cet article, j'ai écrit une image de carrousel pour mettre en pratique mes compétences. J'ai d'abord écrit une image de carrousel qui clique manuellement sur le carrousel, puis j'écrirai lentement et profondément l'image de carrousel automatique et l'image de survol pour arrêter de bouger. l'image du carrousel.
Jetons un coup d'œil à l'effet carrousel final du clic manuel :

1. Explication du principe

(1) Le premier est la structure de l'image du carrousel. J'utilise un grand div le plus à l'extérieur pour envelopper deux petits div. Un petit div contient quatre images et l'autre petit div contient quatre boutons numériques

(2) Définissez la largeur du grand div le plus à l'extérieur sur la largeur de l'image. Tout ce qui dépasse la largeur du grand div doit être masqué. Cependant, définissez la largeur du petit div contenant l'image sur 2000px. une plus grande facilitera le flottement à gauche des quatre images

(3) Lorsque vous cliquez sur le bouton numérique, obtenez la valeur d'index du bouton, afin que vous puissiez savoir de quelle largeur chaque image est déplacée vers la gauche

Comme le montre l'image ci-dessus, les quatre images sont disposées horizontalement Lorsque vous cliquez sur le bouton numérique, l'image sera affichée dans le cadre parent en fonction de la valeur d'index du bouton numérique. Les images en dehors du cadre parent seront masquées~~~~~Si vous ne comprenez toujours pas le principe, je ne peux que vomir du sang~~~~
2. Regardons le programme principal

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

Copier après la connexion

J'ai expliqué la disposition ci-dessus dans le principe Si vous êtes intéressé, vous pouvez lire le principe par vous-même~~~~
3. Style 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;
}

Copier après la connexion

J'ai noté les points importants dans le style ci-dessus. Je pense que ce sera facile à comprendre si vous avez des connaissances de base. Au début, j'ai oublié d'écrire position: relative dans le style .slideShow ul; les images ultérieures du programme jquery ne peuvent pas bouger. Il m'a fallu beaucoup de temps pour trouver cette erreur. J'espère que tout le monde pourra prêter attention à cet endroit ~~~~~~~
. 4. Programme 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确定
   })
  })
})

Copier après la connexion

Pensez-vous que c'est très simple ? Vous pouvez obtenir l'effet carrousel des clics manuels en quelques mots. Ce à quoi vous devez faire attention dans le programme ci-dessus, c'est que l'attribut gauche est déplacé vers la gauche, donc il. est une valeur négative~~~~~~~

Je partagerai avec vous les effets carrousel automatiques dans le prochain article, j'espère que vous ne les manquerez pas.