Maison > Article > interface Web > Exemples détaillés d'effets de commutation d'image automatiques ou manuels jQuery

Exemples détaillés d'effets de commutation d'image automatiques ou manuels jQuery

小云云original: 2017-12-26 17:16:031455parcourir

Lorsque vous parcourez les sites Web des principaux centres commerciaux ou la page d'accueil de certains sites Web, certaines images de changement en temps réel liées à ce site Web seront affichées en détail. Cet article présente principalement l'effet de changement d'image automatique ou manuel de jQuery, qui a certaines références. valeur, les amis intéressés peuvent s'y référer, j'espère que cela pourra aider tout le monde.

Code principal de la page d'accueil (Default.aspx) :

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>jQuery实现图片切换</title>  
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/tupianqiehuan.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/tupianqiehuan.css"> 
</head> 
<body> 
    <p class="wrapper"> 
        <h1>jquer实现图片切换</h1> 
        <p id="focus"> 
            <ul> 
                <li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/02.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/03.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/04.jpg" alt="" /></a></li><span style="white-space:pre">                 </ul> 
        </p> 
    </p> 
</body> 
</html>

Code CSS (tupianqiehuan.css) :

*{margin:0;padding:0;} 
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} 
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} 
.clearfix{zoom:1;} 
ul,li{list-style:none;} 
img{border:0;} 
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;} 
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 
/* focus */ 
#focus{width:800px;height:280px;overflow:hidden;position:relative;} 
#focus ul{height:380px;position:absolute;} 
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;} 
#focus ul li p{position:absolute;overflow:hidden;} 
#focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;} 
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;} 
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;} 
#focus .btn span.on{background:#fff;} 
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(http://sandbox.runjs.cn/uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;cursor:pointer;} 
#focus .pre{left:0;} 
#focus .next{right:0;background-position:right top;}

Code JS (tupianqiehuan.js) :

$(function() { 
  var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积） 
  var len = $("#focus ul li").length; //获取焦点图个数 
  var index = 0; 
  var picTimer; 
   
  //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮 
  var btn = "<p class=&#39;btnBg&#39;></p><p class=&#39;btn&#39;>"; 
  for(var i=0; i < len; i++) { 
    btn += "<span></span>"; 
  } 
  btn += "</p><p class=&#39;preNext pre&#39;></p><p class=&#39;preNext next&#39;></p>"; 
  $("#focus").append(btn); 
  $("#focus .btnBg").css("opacity",0.5); 
 
  //为小按钮添加鼠标滑入事件，以显示相应的内容 
  $("#focus .btn span").css("opacity",0.4).mouseover(function() { 
    index = $("#focus .btn span").index(this); 
    showPics(index); 
  }).eq(0).trigger("mouseover"); 
 
  //上一页、下一页按钮透明度处理 
  $("#focus .preNext").css("opacity",0.2).hover(function() { 
    $(this).stop(true,false).animate({"opacity":"0.5"},300); 
  },function() { 
    $(this).stop(true,false).animate({"opacity":"0.2"},300); 
  }); 
 
  //上一页按钮 
  $("#focus .pre").click(function() { 
    index -= 1; 
    if(index == -1) {index = len - 1;} 
    showPics(index); 
  }); 
 
  //下一页按钮 
  $("#focus .next").click(function() { 
    index += 1; 
    if(index == len) {index = 0;} 
    showPics(index); 
  }); 
 
  //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度 
  $("#focus ul").css("width",sWidth * (len)); 
   
  //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 
  $("#focus").hover(function() { 
    clearInterval(picTimer); 
  },function() { 
    picTimer = setInterval(function() { 
      showPics(index); 
      index++; 
      if(index == len) {index = 0;} 
    },4000); //此4000代表自动播放的间隔，单位：毫秒 
  }).trigger("mouseleave"); 
   
  //显示图片函数，根据接收的index值显示相应的内容 
  function showPics(index) { //普通切换 
    var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 
    $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position 
    $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);//为当前的按钮切换到选中的效果  
  } 
});

Pour des effets spécifiques, veuillez reportez-vous à la démonstration de l'effet

Ici, je vais d'abord vous donner un apéritif, et plus tard je prendrai le temps de parler brièvement de la façon de publier votre propre mini-programme sur RunJS et de quelques conseils sur l'utilisation de RunJS.

Recommandations associées :

Analyse détaillée de la mise en œuvre JS de l'effet de commutation de défilement d'étiquette

Effet de commutation de diaporama d'image de commutation JS

Utiliser JavaScript pour expliquer l'effet de changement d'onglet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple détaillé d'utilisation simple de la fonction extend dans jQueryArticle suivant：Exemple détaillé d'utilisation simple de la fonction extend dans jQuery

Articles Liés

Voir plus