JS manual playback picture to achieve the _javascript technique of the picture carousel effect

This example for you to share the JS picture Carousel Specific implementation code, for your reference, the specific content as follows

One, HTML code section (et.thtml):

<! DOCTYPE html>  

Second, CSS Code section (STYLEET,CSS):

#main span{
  width:22px;
  height:38px;
  Position:absolute;
  Display:inline-block;
  Cursor:pointer;
  Background:url (".. /images/1.png ") no-repeat 0 0;
}
. span1{
  background-position:0 0;
  left:20px;
  top:90px
}
. span2{
  background-position: -22px 0;
  right:20px;
  top:90px;
}
#main {
  width:500px;
  margin:20px Auto;
  Text-align:center;
  Border:solid 2px Red;
  Position:relative
}
. initclass{
  width:50px;
  Border:solid 2px #fff;
  margin:10px 5px;
focusclass{
  width:50px;
  Border:solid 2px Red;
  margin:10px 5px;
}

Third, JS code section (et.js):

/** * Created by Luanreco on 2015/8/28. * * var slide={arrimg:new Array (' images/1.jpg ', ' images/2.jpg ', ' images/3.jpg ', ' images/4.jpg ', ' images/5.jpg ', ' images ') /6.jpg ', ' images/7.jpg '), Initclass: ' Initclass ', Focusclass: ' Focusclass ', index:1, Arrmax:7, Imgmain: ' img '} slid
    e.top={//Navigation event Navevent:function () {///the top part of the large picture shows the corresponding picture of the cumulative subscript $$ (Slide.imgmain). Src=slide.arrimg[slide.index-1];
    According to the focus of the index combination into the navigation picture name var n= ' img ' +slide.index;
  Perform the corresponding navigation picture Click event $$ (N).

    Clickright:function () {///Click the right button to handle the event Console.log (Slide.index);
      If the current subscript is less than or equal to the maximum number of pictures if (Slide.index<slide.arrmax) {///Add the present subscript value slide.index++;
    Slide.top.navEvent ();

    }, Clickleft:function () {//Click the right button to handle event Console.log (Slide.index);
      If the current subscript is less than or equal to the maximum number of pictures if (slide.index>1) {///Add the present subscript value slide.index--;
    Slide.top.navEvent (); }} slide.bottom={Initimgclass:function () {//Initialize all style for not picture for (Var i=1;i&lt=slide.arrmax;i++) {var n= ' img ' +i;
    $$ (n). Classname=slide.initclass;
    }, Click:function () {//processing the logical $$ (' IMGL ') of the next section of the page. Onclick=function () {slide.top.clickLeft ();
    } $$ (' Imgr '). Onclick=function () {slide.top.clickRight ();
      //Get all the bottom of the small picture for (Var i=1;i<=slide.arrmax;i++) {//To bind the Fixed-point event to each picture n= ' img ' +i;
        $$ (n). Onclick=function () {//initialization of all styles Slide.bottom.initImgClass ();
        The picture element itself gets the focus style this.classname=slide.focusclass;
        In the upper picture Show click Small picture corresponding large picture $$ (Slide.imgmain). Src=slide.arrimg[this.getattribute (' Data-index ')-1];
      Re-record the corresponding subscript position of the focus picture in the array slide.index=this.getattribute (' Data-index ');
    }}} slide.autoplay={Play:function () {var m=1;
        for (Var i=1;i<=slide.arrmax;i++) {setinterval (function () {var n= ' img ' +m;
        m++;
        $$ (N). Click ();
      if (m>6) m=1; },1000)//}} slide.autoplay.play ();
Slide.bottom.click ();
 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.