recherche

Maison >interface Web >js tutoriel >Implémentation d'un effet carrousel avec des vignettes basées sur JavaScript

Implémentation d'un effet carrousel avec des vignettes basées sur JavaScript

高洛峰
高洛峰original
2017-01-12 10:53:001525parcourir

Jetez d'abord un œil aux rendus du carrousel js

Implémentation dun effet carrousel avec des vignettes basées sur JavaScript

Code : 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{padding:0;margin:0;}
#content {width:400px;height:500px;margin:10px auto;position:relative;border:1px solid #000;color:red;font-size:20px;}
#title, #bottom{position:absolute;width:400px;height:30px;line-height:30px;text-align:center;font-size:20px;background:#f1f1f1;}
#bottom{bottom:0;cursor:pointer;}
#bottom span{display:inline-block;width:15px;height:15px;border-radius:15px;background:#000;text-align:center;line-height:15px;position:relative;}
#bottom span.active{background: #FFFF33;}
#bottom span div {position:absolute;width:110px;height:110px;top:-125px;left:-46px;display:none;}
#bottom span div:after{content:&#39;&#39;;position:absolute;left:49px;bottom:-12px;border-top:7px solid #fff;border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;}
#bottom span img {width:100px;height:100px;border:5px solid #fff;}
#left, #right{position:absolute;width:60px;height:60px;border-radius:60px;line-height:60px;font-size:60px;background:#FFFF66;font-weight:bold;text-align:center;top:50%;margin-top:-25px;color:#fff;cursor:pointer;filter(opacity:70);opacity:0.7;}
#left:hover,#right:hover{filter(opacity:100);opacity:1;}
#left{left:0px;}
#right{right:0px;} 
#img{width:400px;height:500px;}
</style>
<script>
window.onload = function () {
  var bottom = $(&#39;bottom&#39;),title = $(&#39;title&#39;),
    img = $(&#39;img&#39;),left = $(&#39;left&#39;),right = $(&#39;right&#39;);
  var aSpan = bottom.getElementsByTagName(&#39;span&#39;);
  var aDiv = bottom.getElementsByTagName(&#39;div&#39;);
  var arr = [&#39;图片一&#39;,&#39;图片二&#39;,&#39;图片三&#39;, &#39;图片四&#39;];
  var num = 0;
  // 初始化
  picTab();
 
  // 点击下一张
  right.onclick = function () {
    if (num === aDiv.length - 1) num = -1;
    num++;
    picTab();
  }
 
  // 点击上一张
  left.onclick = function () {
    if (num === 0) num = aDiv.length;
    num--;
    picTab();
  }
 
  function picTab() {
    title.innerHTML = arr[num];
    img.src = &#39;img/&#39; + (num + 1) + &#39;.png&#39;;
    for ( var i = 0; i < aSpan.length; i++ ) {
      aSpan[i].className = &#39;&#39;;
    }
    aSpan[num].className = &#39;active&#39;;
  }
  // 鼠标移入移出显示缩略图
  for ( var i = 0; i < aSpan.length; i++ ) {
    aSpan[i].index = i;
    aSpan[i].onmouseover = function () {
      aDiv[this.index].style.display = &#39;block&#39;;
    }
    aSpan[i].onmouseout = function () {
      aDiv[this.index].style.display = &#39;none&#39;;
    }
    aSpan[i].onclick = function () {
      num = this.index;
      picTab();
    }
  }
  function $(id) { return document.getElementById(id);}
}
</script>
</head>
<body>
<div id="content">
  <div id="title">带缩略图的轮播</div>
  <div id="left"><</div>
  <div id="right">></div>
  <div id="bottom">
    <span><div><img  src="img/1.png"/ alt="Implémentation d'un effet carrousel avec des vignettes basées sur JavaScript" ></div></span>
    <span><div><img  src="img/2.png"/ alt="Implémentation d'un effet carrousel avec des vignettes basées sur JavaScript" ></div></span>
    <span><div><img  src="img/3.png"/ alt="Implémentation d'un effet carrousel avec des vignettes basées sur JavaScript" ></div></span>
    <span><div><img  src="img/4.png"/ alt="Implémentation d'un effet carrousel avec des vignettes basées sur JavaScript" ></div></span>
  </div>
  <img  src="" id="img"/ alt="Implémentation d'un effet carrousel avec des vignettes basées sur JavaScript" >
</div>
</body>
</html>

Ce qui précède représente l'intégralité du contenu de cet article, j'espère ce sera utile pour l'apprentissage de tout le monde. Merci pour votre aide et j'espère que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés à l'implémentation de l'effet carrousel avec des vignettes basées sur JavaScript, veuillez faire attention au site Web PHP 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：js carrousel d'images (5 images)Article suivant：js carrousel d'images (5 images)

Articles Liés

Voir plus