Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementierung eines Karusselleffekts mit Miniaturansichten basierend auf JavaScript

高洛峰
Freigeben: 2017-01-12 10:53:00
Original
1506 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!