Heim > Artikel > Web-Frontend > Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript

Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript

高洛峰Original: 2017-01-12 10:53:001503Durchsuche

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

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js Bilderkarussell (5 Bilder)Nächster Artikel：js Bilderkarussell (5 Bilder)

In Verbindung stehende Artikel

Mehr sehen