JS imitation of the Beijing-East moving end finger toggle switch wheel plot effect _javascript skills

Today, the mobile end of the Web page in the market is also a considerable proportion, and the mobile end of the carousel graph effect is also very common, I have to record the implementation of a set of available for the mobile end of the fingers to toggle the transfer of the rotation diagram effect.
The main technical point of this effect is based on touch events unique to the touchscreen device; OK, let's go to the topic.

The first is the HTML layout :

1. The emphasis here is to remember to add viewport to the HTML for this palatability attribute.
2. As the first picture and the last picture need to switch to the last one and the first one, to achieve the desired effect, you need to add the last picture before the first picture, and the last one to add the first picture.
3. f_l represents a left-floating

The **html code is as follows: * *

    <ul class= ' Banner_imgs clearfix ' > <li class= ' f_l ' > <a href= ' # "></a> </li> <li class= ' f_l ' > <a href=" # "></a> </li> <li class= ' f_l ' > <a href=" # "></a> </li> <li class= ' f_l ' > <a href=" # "></a> </li> <li class= ' f_l ' > <a href= "#" > </li> <li class= ' f_l ' > <a href= "#" >& lt;/a> </li> <li class= ' f_l ' > <a href= "#" >< /a> </li> <li class= ' f_l ' > <a href= "#" ></a&
     Gt
   </li>  <li class= ' f_l ' > <a href= "#" ></a> </li> & Lt;li class= ' f_l ' > <a href= "#" ></a> </li> </
     Ul> <!--the index of--> <ul class= "Banner_index clearfix" > <li class= "Current" ></li> <li></li> <li></li> <li></li> <li></li> <li&gt
 ;</li> <li></li> <li></li> </ul>

Next is the CSS style :

Note that the general reset style code is not added here

. Jd_banner. Banner_imgs {
 /* 10 times times Screen width *
 /width:1000%;
}
. Jd_banner. Banner_imgs li {
 /* One times the screen width *
 /width:10%;
}
. Jd_banner. Banner_imgs Li a {
 display:block;
 width:100%
}
. Jd_banner. Banner_imgs li a img {
 display:block;
 width:100%
}
. Jd_banner. banner_index {
 position:absolute;
 bottom:15px;
 left:50%;
 Margin-left: -64px
}
. Jd_banner. banner_index li {
 float:left;
 width:6px;
 height:6px;
 border:1px solid white;
 border-radius:50%;
 margin:0 5px;
Jd_banner. Banner_index li.current {
 background-color: #fff;
}

Finally, the most important JS code

1. Transitionend transition After the end of the effect of triggering, here is to ensure that the picture switch to the last one we manually increase the picture completed the instant, switch back to the real first picture of the place;
2. Touch event three elements: touchstart--finger when pressed, touchmove--finger move, touchend--finger release screen;
3. Event.touches[0].clientx gets the position of a finger when it is pressed, you can print out an event to see which property methods it contains;

Window.onload = function () {slide ();}
 function Slide () {var bannerimgs = Document.queryselector (". Banner_imgs");
 var indexs = Document.queryselectorall (". Banner_index li");

 var imglis = Document.queryselectorall (". Banner_imgs li");
 Screen width var screenwidth = document.body.offsetWidth;

 var index = 1;

 The default display should be the second picture BannerImgs.style.transform = "Translatex (" + screenwidth * Index *-1 + "px");
  Add transition effect function settransition () {bannerImgs.style.webkitTransition = ' all 2s ';
 bannerImgs.style.transition = "all 2s";
  //Clear Transition effect function cleartransition () {bannerImgs.style.webkitTransition = ' none ';
 BannerImgs.style.transition = "None";
  //Set Move distance function Settranslatex (distance) {bannerImgs.style.webkitTransform = "Translatex (" + distance + "px)";
 BannerImgs.style.transform = "Translatex (" + Distance + "px");
  ///Control dot function setpoint () {for (var i = 0; i < indexs.length; i++) {indexs[i].classname = ""; } Indexs[index-1].classname = "current";
  //Set Timer var timer = setinterval (function () {index++;
  Settransition ();
 Settranslatex (screenwidth * Index *-1);

 }, 1000);
  Add transition animation End Event Bannerimgs.addeventlistener ("Transitionend", function () {if (Index > 8) {index = 1;
  else if (Index < 1) {index = 8;
  } cleartransition ();
  Settranslatex (screenwidth * Index *-1);
 SetPoint ();
 //Add Touch event var startx = 0;
 var MoveX = 0;

 var ismove = false;
  Bannerimgs.addeventlistener ("Touchstart", function (event) {ismove = false;
  Clearinterval (timer);
 StartX = Event.touches[0].clientx;
  }) Bannerimgs.addeventlistener ("Touchmove", function (event) {Ismove = true;
  MoveX = Event.touches[0].clientx-startx;
 Settranslatex (MoveX + index * screenwidth *-1); 
   }) Bannerimgs.addeventlistener ("Touchend", function (event) {if (Ismove && math.abs (MoveX) > Screenwidth/3) {
   if (MoveX < 0) {index++;
   else if (MoveX > 0) {index--; }} SettransItion ();
  Settranslatex (Index * screenwidth *-1);
   Timer = setinterval (function () {index++;
   Settransition ();
  Settranslatex (screenwidth * Index *-1);
 }, 1000);
 })
}

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.