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