jQuery réalise l'effet de changer d'image dans et hors

Avant cela, regardons quel effet nous souhaitons avoir :

Nous voulons que les images changent automatiquement après une « certaine période de temps ». Il y a des petits carrés dans le coin inférieur droit qui ressemblent aux chiffres 1, 2, 3 et 4. Ces chiffres apparaissent automatiquement en fonction du nombre de personnes. les images lorsque la souris passe dessus. La couleur des chiffres présente certains changements

Voyons comment le mettre en œuvre.

Première étape : écrivez d'abord une page HTML simple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../js/jquery.js" ></script>
  <script type="text/javascript" src="scrollPic.js" ></script>
  <link rel="stylesheet" href="scrollPic.css">
</head>
<body>
  <div class="pic-slider-io">
    <ul>
      <li><img src="images/1.jpg" /></li>
      <li><img src="images/2.jpg" /></li>
      <li><img src="images/3.jpg" /></li>
      <li><img src="images/4.jpg" /></li>
    </ul>
  </div>  
</body>
</html>

Copier après la connexion

Analyse du code de page : créez d'abord scrollPic.html, scrollPic.js, scrollPic.css. Sans plus tarder, créez d'abord les trois fichiers de base requis puis introduisez-les dans le html dans la section head, où note

src="../js/jquery.js"
La signification de ce code, "../" signifie sortir du répertoire de niveau supérieur, puis rechercher le fichier jquery.js dans le dossier js
; Dans la page html, nous ajoutons un div avec la classe 'pic-slider-io' dans le corps. Il y a un ul dans le div. Il y a quatre images sous le li. Remarque : les images sont nommées à l'avance, ce qui correspond à 1. .jpg.2.jpg... Pratique pour écrire scrollPic.js
Regardez d'abord le style de page qui n'a rien fait pour le moment :

Vous pouvez voir que l'image est en mosaïque sur la page dans sa taille d'origine et affichée sur la page dans le mode ul li par défaut
; Maintenant, nous allons le mettre dans le coin inférieur gauche

Étape 2 : Écrivez des styles CSS pour le contrôler
Contrôlez d’abord l’affichage du div :

.pic-slider-io{
  height : 200px;  //设置div的高为200px；
  width : 800px;　　//设置div的宽为800px；
  float : letf; 　　//float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
  position : relative;　　//position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定　　　　　　　　　　　　　　　　//位元素会相对于它在正常流中的默认位置偏移。relative 生成相对定位的元素，相对于其正常位置进行定位。
  overflow : hidden; //overflow 属性规定当内容溢出元素框时发生的事情.hidden 内容会被修剪，并且其余内容是不可见的。
}

Copier après la connexion

Jetez un œil au style de la page :

Vérifiez que toutes les images sont ensemble. L'image elle-même est plus grande que la largeur et la hauteur du div, donc overflow: Hidden n'affichera pas d'autres débordements. Cependant, ce n'est certainement pas ce que nous voulons, alors ne vous précipitez pas. pour continuer;
Ensuite, on contrôle désormais le style de ul :

.pic-slider-io ul{
  margin : 0px; //设置上下左右的外边距都为0；
  padding : 0px;//设置上下左右的内边距都为0；  注意：margin,padding的设置是：上，右，下，左；如margin ： 2px,4px,5px,8px;分别对应的是上，右，下，左；
  height : auto;　　//自适应高度，浏览器自动计算
  width : 100%;　　//宽度为100%
  list-style-type : none; 　　　　//把li的点去掉
  float : left;　　
  display : block;　　//此元素将显示为块级元素，此元素前后会带有换行符
  position : absolute;//生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  top : 0;
  left : 0;
  z-index : 98;//z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
}

Copier après la connexion

À ce moment-là, l'image ne sera plus affichée. Ce que vous voyez sur la page, c'est que le point dans le coin supérieur gauche a été supprimé

;

Encore une fois, nous contrôlons le style de li :

.pic-slider-io ul li {
  height: auto;
  width: 100%;
  float: left;
  padding: 0px;
  margin: 0px; 
  overflow: hidden;
  z-index:1; //这个li层就比ul那个叠层更高
}

Copier après la connexion

Le réglage de ce style consiste principalement à rendre la pile de li plus haute que ul, ce qui équivaut à flotter au-dessus de ul

;

Enfin, jetons un œil au style de img :

.pic-slider-io ul li img{ 
  width: 100%;
   z-index:1;//设置图片和li在同一层上，这个应该没问题吧
}

Copier après la connexion

Voyons maintenant à quoi ressemble la page :

Voir, après le style, l'image entière est affichée

Étape 3 : Écrivez scrollPic.js
Lors de l'écriture de js, nous devons ajouter l'affichage du numéro d'image dans le coin inférieur droit. Nous écrivons le css à ajouter à l'avance comme suit :

.pic-page-btn {//这是在父div中的子div样式，用于显示在右下角的数字承载模块
  float: left;
  width: auto;
  height: 30px; 
  position: absolute; 
  bottom: 20px; 
  right: 20px;
  z-index: 99; //他的叠层比父级div还要高，把这个按钮样式放在图片之上
}
.pic-page-btn span{ //这个是设置子div的数字样式
  height: 30px;
  width: 30px;
  background-color: #999;
  display: block;
  float: left;
  line-height: 30px;
  text-align: center;
  color: #FFF;
  margin-right: 10px;
  cursor:pointer;
}
.pic-page-btn .current {//这是将要设置鼠标滑过改变其背景颜色
  background-color: #1D5D76;
}

Copier après la connexion

Ensuite, jetons un œil à l'écriture de js. Ce n'est pas une vidéo, donc je ne vais pas l'expliquer étape par étape, j'ai commenté toutes les explications dans le code js

code js :

$(function(){
  $.scrollPic = function (options){ //定义了一个scrollPic函数，有一个传参，用于调用；
     /************************开始整个默认插件参数讲解*******************************/
    //整个defaults以花括号包含的是默认的参数，调用此插件的只需要修改ele，Time，autoscroll即可；
    var defaults={
      ele: '.pic-slider-io',   //pic-slider-io是一个class，css中定义了其样式；
      Time : '2000',      //Time是定义了滑动的时间；
      autoscroll : true    //autoscroll设为true表示自动切换图片；
    };
    /************************结束整个默认插件参数讲解*******************************/
    
    //$.extend({},defaults, option)有{}主要是为了创建一个新对象，保留对象的默认值。
    var opts = $.extend({}, defaults, options);
    
    //$(opts.ele)可以理解为取这个执行，与$('.class1').click();类似表示，然后理解为赋值给PicObject；
    //或者这样理解,$(opts.ele)就是$('.pic-slider-io')，只不过（.pic-slider-io是个class作为参数，所以要(opts.ele)来表示）；
    var PicObject = $(opts.ele);
    
    //PicObject.find('ul')，这个可以理解成$(opts.ele).find('ul'),因为opts.ele其实就是取得的一个class，
    //相当于$('.pic-slider-io').find('ul');然后赋值给scrollList，所以整个就用scrollList来表示他；
    var scrollList = PicObject.find('ul');
    
    //同理scrollList.find('li')可以表示为$('.pic-slider-io').find('ul').find('li');所以这个是一层一层来查找的如果你看到html就会更加清晰；
    var listLi = scrollList.find('li');
    
    //图片的命名是1.jpg,2.jpg,这样的，index是用来表示图片的名字的初始化赋值为0；
    var index = 0;
    
    //这是定义一个picTimer(自动切换函数)的函数；
    var picTimer;
    
    //一个li中包含一个图片，所以这是查找有多少个图片，赋值给len；
    var len = PicObject.find('li').length;
    
    /*****************开始自动切换函数************************/
    function picTimer(){
      showPic(index);//调用showPic(index)函数(在下面)
      index++;
      if(index == len){//如果index的值等于len，就表示从第一张图片到最后一张图片切换完了，然后是index赋值为0重新开始
        index=0;
      }
    }
    /*****************结束自动切换函数************************/
    
    
    //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
    //setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
    //此判断为如果autoscroll为true，则不停的调用picTimer函数，以Time的速度调用
    if(opts.autoscroll){
      var time = setInterval(picTimer,opts.Time);
    }
    
    
    /*****************开始动画函数************************/
    function showPic(index){//定义动画函数
      //listLi是找到第一个li，然后隐藏他，listLi在var listLi = scrollList.find('li');已经介绍了
      listLi.hide();
      //fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。siblings()方法是遍历。
      listLi.eq(index).fadeIn(500).siblings().hide();
      //找到paging对应的css样式，如果与当前的index一致，则添加class为current的css样式，否则就移除。
      PicObject.find(paging).eq(index).addClass('current').siblings().removeClass('current');
    }
    /*****************结束动画函数************************/
    
    //这是在class为pic-slider-io的div中添加一个class为pic-page-btn的子div。
    //主要是设置右下角数字的承载
    PicObject.append('<div class="pic-page-btn"></div>');
    
    //在这个class为pic-page-btn的子div中添加图片张数对应的数字个数，1,2,3，，，，，
    //从这可以看出来，数字不是自己一个个添得，是根据li的个数，也就是图片的个数自动生成的
    for( i=1;i<=len;i++){
      PicObject.find('.pic-page-btn').append('<span>'+i+'</span>');
    }
    
    //这个就是和上面讲listLi一样的
    var paging = PicObject.find('.pic-page-btn span');
    
    //为相应的右下角的数字改变其背景颜色
    paging.eq(index).addClass('current');
    
  }
});

Copier après la connexion

Voici, nous avons presque fini de changer d'image,

Alors appelons celui par défaut en html et jetons un œil :

Méthode d'appel :

<script type="text/javascript">
$(function(){
    $.scrollPic();
  }); 
</script>

Copier après la connexion

Regardez l'affichage de l'interface :

Regardez la flèche indiquant que l'image peut être automatiquement changée
Mais nous avons également la possibilité de changer d'image lorsque la souris glisse sur 1, 2, 3 et 4 dans le coin inférieur droit, nous ajoutons donc simplement un événement à js :

  //鼠标经过1、2、3、4的效果
    PicObject.find(paging).mouseover(function(){
      index = PicObject.find(paging).index($(this));
      showPic(index); //调用showPic(index)函数。
    });
    //鼠标经过1、2、3、4的效果
    
    //清除计时器
    //当鼠标悬浮在1,2,3,4上面的时候，就相当于要切换图片了
    //所以我们就要清除计时器，重新来过了
    PicObject.hover(function(){
      clearInterval(time);//这个是相对于setInterva()的；
    },function(){
      if(opts.autoscroll){
        time = setInterval(picTimer,opts.Time);
      }else{
        clearInterval(time);
      }
    });

Copier après la connexion

Ajoutez ce code à js, ne dites pas où l'ajouter ! Ajouter à

paging.eq(index).addClass('current');
Tout ira bien plus tard

De cette façon, l'intégralité du plug-in de changement d'image est terminée
; Si vous devez appeler une fonction, vous pouvez modifier ele, Timer, autoscroll.
Jetez un œil à l'utilisation du plugin avec des paramètres :

<script type="text/javascript">
 $(function(){
    $.scrollPic({
      ele: '.pic-slider-io',  //插件应用div
      Time:'3000',     //自动切换时间
      autoscroll:true,    //设置是否自动渐变
   });
  }); 
</script>

Copier après la connexion

D'accord, la description de l'ensemble du plug-in est complète. J'espère que tout le monde pourra en tirer des leçons. S'il y a des lacunes, j'espère que vous pourrez comprendre ! (Enfin, lors de l'écriture du js entier, il est préférable d'ajouter un point-virgule devant $(function(){}) ; pour éviter les conflits avec d'autres js)

jQuery réalise l'effet de changer d'image dans et hors_jquery