Javascript: A simple image switch plugin

Recently hooked on JavaScript, do not write something every day is not comfortable ha ~

In spite of his limited ability, he is doing his best to write something.

Implementation results:

Effect preview: Http://codepen.io/anon/pen/BNjxXj

The plugin is divided into two modes: loop playback mode, and one-way playback mode

# No when playback mode is selected:

When you select the cycle mode, when the picture is played to the first page, or the last page, jump to the last page, or the first page continues to play

3# Select one-way playback mode, when playing to the first page, or the last page, give a reminder, the picture can not forward, or continue to play back

Post code:

JavaScript section:

  varOcircle=document.getelementbyid (' Circle '); varOsingle=document.getelementbyid (' single '); varOimg=document.getelementbyid (' img '); varOprevbtn=document.getelementbyid (' prevbtn '); varOnextbtn=document.getelementbyid (' nextbtn '); varOpagecount=document.getelementbyid (' PageCount '); varOimgdes=document.getelementbyid (' Imgdes '); varimgcount=[' 0.jpg ', ' 1.jpg ', ' 2.jpg ', ' 3.jpg ']; varimgtitle=[' 1tree ', ' 2run ', ' 3hit ', ' 4sun ']; varNum=0; //extract public Execution part    functionCommonfun () {oimg.src= ' img/' +Imgcount[num]; Opagecount.innerhtml=num+1 + '/' +imgcount.length; Oimgdes.innerhtml=Imgtitle[num];      } commonfun (); //when the user does not select the playback mode, first remind them to select the playback mode    if(OSingle.classList.contains (' btnselect ') = =false&& oCircle.classList.contains (' btnselect ') = =false) {Onextbtn.onclick=function() {alert ("Please select Picture playback mode"); } Oprevbtn.onclick=function() {alert ("Please select Play Mode"); }    }    //turn on loop playback modeOcircle.onclick=function(){        //button style changes when Add button is selected     if(OSingle.classList.contains (' Btnselect ') {oSingle.classList.remove (' Btnselect '); } oCircle.classList.add (' Btnselect '); //Loop play function BodyOnextbtn.onclick=function() {num++; if(num>imgcount.length-1) {num=0;    } commonfun (); } Oprevbtn.onclick=function() {num--; if(num<0) {num=imgcount.length-1;    } commonfun (); }    }    //turn on one-way playback modeOsingle.onclick=function(){        //button style changes when Add button is selected        if(OCircle.classList.contains (' Btnselect ') {oCircle.classList.remove (' Btnselect '); } oSingle.classList.add (' Btnselect '); Onextbtn.onclick=function() {num++; if(num>imgcount.length-1) {alert ("~wow~ is the last one, please play forward"); Num=imgcount.length-1;    } commonfun (); }     //Loop play function Bodyoprevbtn.onclick=function() {num--; if(num<0) {alert ("~wow~ is the first one, please play back"); Num=0;    } commonfun (); }    }

CSS part: Simple, adaptive display of the image Flex

  *{margin:0;    padding:0;    } a{Text-decoration:none;        }. container{position:relative;    margin:0 Auto;    width:400px;        height:400px;        font-size:13px;    Overflow:hidden;        Background-color: #333;        Display:-webkit-flex;        Display:flex;    Align-items:center;      }. btnbox{width:400px;      height:44px;      line-height:44px;      MARGIN:25PX Auto;    Background-color: #eee;      }. btn {float:left;      width:49.9%;      height:100%;      border:0;      outline:0;      Background-color: #eee;    border-left:1px solid Rgba (0,0,0,0.15);    }. btn:first-child{border-left:0;        }. btnselect{Background-color: #00bb9c;    Color: #fff;        }. singleselect{Background-color: #00bb9c;      Color: #fff;    }. imgstyle{max-width:100%;      }. prev,.next{Position:absolute;      top:180px;      width:40px;      height:40px; Line-height:40px;      Text-align:center;      Background-color:rgba (0,0,0,0.6);      font-size:18px;      font-family:cursive;    Color: #fff;    }. prev{left:0;    }. next{right:0;        }. pagecount,.imgdes{Position:absolute;        left:0;        width:100%;        height:36px;        line-height:36px;        Text-align:center;        Background-color:rgba (0,0,0,0.3);    Color: #fff;    }. pagecount{top:0;    }. imgdes{bottom:0; }

HTML section:

　　
Javascript: A simple image switch plugin