Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript-js-Tutorial-php.cn

Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript

高洛峰

Freigeben： 2017-01-12 10:53:00

Original

1543 Leute haben es durchsucht

Schauen Sie sich zunächst die JS-Karussell-Renderings an

Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf 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="Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript" ></div></span>
    <span><div><img  src="img/2.png"/ alt="Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript" ></div></span>
    <span><div><img  src="img/3.png"/ alt="Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript" ></div></span>
    <span><div><img  src="img/4.png"/ alt="Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript" ></div></span>
  </div>
  <img  src="" id="img"/ alt="Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript" >
</div>
</body>
</html>

Nach dem Login kopieren

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für das Lernen aller nützlich sein. Vielen Dank für Ihre Hilfe und ich hoffe, dass alle die chinesische PHP-Website unterstützen werden.

Weitere Artikel zur Implementierung des Karusselleffekts mit Miniaturansichten auf Basis von JavaScript finden Sie auf der chinesischen PHP-Website!