How to realize the effect of carousel with thumbnail in JavaScript

This article is to share with you about how JavaScript can achieve the effect of rotation with thumbnails. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Code:

* {padding:0;margin:0;} # content {width:400px;height:500px;margin:10px auto;position:relative;border:1px solid # 000X ColorizRedTing Font Liguetz 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:'';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;} _ window.onload = function () {var bottom = $('bottom'), title = $(' title'), img = $('img'), left = $(' left'), right = $('right'); var aSpan = bottom.getElementsByTagName (' span'); var aDiv = bottom.getElementsByTagName ('div') Var arr = ['picture 1', 'picture 2', 'picture 3', 'picture 4']; var num = 0; / / initialize picTab (); / / Click the next right.onclick = function () {if (num = aDiv.length-1) num =-1; num++; picTab ();} / / Click the previous left.onclick = function () {if (num = = 0) num = aDiv.length; num--; picTab () } function picTab () {title [XSS _ clean] = arr [num]; img.src = 'img/' + (num + 1) +' .png'; for (title I = 0; I

< aSpan.length; i++ ) { aSpan[i].className = ''; } aSpan[num].className = 'active'; } // 鼠标移入移出显示缩略图 for ( var i = 0; i < aSpan.length; i++ ) { aSpan[i].index = i; aSpan[i].onmouseover = function () { aDiv[this.index].style.display = 'block'; } aSpan[i].onmouseout = function () { aDiv[this.index].style.display = 'none'; } aSpan[i].onclick = function () { num = this.index; picTab(); } } function $(id) { return document.getElementById(id);}} 带缩略图的轮播

Thank you for reading! This is the end of the article on "how to achieve the rowing effect with thumbnails in JavaScript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!