JavaScript-enabled slide transitions with thumbnail functionality

Not long ago wrote a simple picture effect, did not think that soon to use the project, so the function to enrich;

Major improvements:

# with a dot instead of the previous simple page display, and click on the dots to display the corresponding picture;

Click on the dots to display thumbnails of the corresponding images.

Today is perfect, of course, animation effects, and other small details have not yet been optimized:

Demo Address: Http://codepen.io/anon/pen/rVMKdz

As follows:

HTML section:

<! DOCTYPE html>
CSS section:
*{margin:0;padding:0;}    #img_container {position:relative;    MARGIN:15PX Auto;    width:800px;    height:400px;    Background-color: #333;    Display:-webkit-flex;      Display:flex;    border-radius:3px;    }. title_common{Position:absolute;    left:0;    width:100%;    height:40px;    line-height:40px;      Color: #fff;    Text-align:center;    } #img_title {top:0;    Background-color:rgba (86,171,228,.5);    } #img_page {bottom:0;    }. switch_title{Position:absolute;    top:50%;    Margin-top: -20px;    width:40px;    height:40px;    line-height:40px;      Text-align:center;      font-size:24px;    Color: #fff;      Cursor:pointer;    Background-color:rgba (0,0,0,.4);    } #img_left {left:0; Background:url (' http://www.iconfont.cn/uploads/fonts/font-134729-.png?color=ecf0f1&size=32 ') no-repeat    Center Center;    } #img_right {right:0; Background:url (' http://www.iconfont.cn/uploads/fonts/font-134735-.Png?color=ecf0f1&size=32 ') No-repeat Center Center;      } #img_container img{max-width:100%;    border-radius:3px;  } #circles {display:inline-block;    MARGIN:13PX 3px;}    #circles li{List-style:none;    Float:left;    width:14px;    height:14px;    Margin:0 3px;    border-radius:7px;    Cursor:pointer;     Background-color:white;     box-shadow:0 1px 2px Rgba (0,0,0,.15);        } #circles li:hover {box-shadow:0 0 10px Orange;}      #circles li.active{Background-color:orange;  }. scontent {display:none;  width:120px;  height:80px;  padding:3px;  Background-color: #fff;  Position:absolute;  right:0;  bottom:40px;  left:307px;  Source of/*307:800/2=400 (half of the large box); 80/2=40 (half of the small box containing dots);          400-40=360 (the distance from the left side of the large box to the left of the small box); 360+3 (margin-left:3px) +7 (dot width/2) = 370; (dot center distance from the left side of the large box);          120/2=60 (half of the thumbnail div width);  Comprehensive: 370-60-3 (padding-left:3px) =307px;  */Margin:auto;  border-radius:3px;  box-shadow:0 0 3px Rgba (0,0,0,0.3); Z-inDex:2;} . scontent img{width:120px; height:80px;}.  Scontent:after {content: ';  Border-style:solid;  border-width:12px 6px 0 6px;  Border-color: #fff transparent transparent transparent;  Position:absolute;  Bottom: -9px;  left:50%;  Margin-left: -6px; Z-index:1;}
　　
JavaScript section:
var oimg=document.getelementbyid (' img '); var Oimg_title=document.getelementbyid (' Img_title ');//superscript var oimg_page= document.getElementById (' img_page ');//subscript var Oimg_left=document.getelementbyid (' Img_left ');//Zoope var oimg_right= document.getElementById (' img_right ');//Right-labeled Var Ocircles=document.getelementbyid (' circles ');//dot inclusion var ali= Ocircles.getelementsbytagname (' Li ');//dot-array var arrimg=[' http://www.quanjing.com/image/psdefault/slide/20150511. JPG ', ' http://www.quanjing.com/image/psdefault/slide/20150513.jpg ', ' http://www.quanjing.com/image/psdefault/ Slide/20150519.jpg ', ' http://www.quanjing.com/image/psdefault/slide/20150518.jpg '];//picture data var arrimgdes=[' City of God ', ' Hard hit ', ' table football ', ' Summer Time '];//picture corresponding description data var num=-1;//dynamically add DOM element for (Var i=0;i<arrimg.length;i++) based on picture data { ocircles.innerhtml + = "<li><div class= ' scontent ' id= ' div" +i+ "' ></div></li > ";} Dot dynamic Add Class function Circlechangecolor () {for (Var i=0;i<ali.length;i++) {if (Ali[i]!==ali[num]) {Ali[i].classname = ';}} Ali[num].classList.add (' active ');} function Changeall () {oimg.src=arrimg[num];oimg_title.innerhtml=arrimgdes[num] for displaying pictures, descriptions, and changes in the color of dots; Circlechangecolor ();} /* Next */oimg_right.onclick=function () {num++;if (num>arrimg.length-1) {num=0;} Changeall ()}/* on a */oimg_left.onclick=function () {num--;if (num<0) {num=arrimg.length-1;} Changeall ()}/*circle onclick event: Click the dot to display the corresponding picture */for (var i=0;i<ali.length;i++) {ali[i].index=i;//Add index value ali[i]. Onclick=function () {oimg.src=arrimg[this.index];oimg_title.innerhtml=arrimgdes[this.index];/* will not have the selected dot initialized */for ( var i=0;i<ali.length;i++) {if (Ali[i]!==ali[this.index]) {ali[i].classname= ';}} Ali[this.index].classlist.add (' active ');//Selected DOT Add class active}/* Circle Hover Event */ali[i].onmouseover=function () {var pos      Ition_index=this.index;      ali[this.index].childnodes[0].style.csstext= "Display:block;margin-left:" +position_index*20+ "px" + "";      Ali[this.index].childnodes[0].childnodes[0].src=arrimg[this.index];} Ali[i].onmouseout=function () {Ali[this.index].childnodes[0].style.csstext= "Display:none;"; Ali[this.index].childnodes[0].childnodes[0].src= ';}}
　　
JavaScript-enabled slide transitions with thumbnail functionality