Detailed explanation of JS method for implementing focus image carousel effect, js focus

Detailed explanation of JS method for implementing focus image carousel effect, js focus

This article describes how to implement the focal point image carousel effect in JS. We will share this with you for your reference. The details are as follows:

As follows:

I. knowledge points used

1. DOM operations

2. Timer

3. Event Application

4. Js Animation

5. Function Recursion

6. Infinite rolling method

Ii. structure and style

<div id="banner" class="banner">  <ul id="list-banner" class="list-banner fn-clear" style="left:-624px;">      <li><a href="#"></a></li>      <li><a href="#"></a></li>      <li><a href="#"></a></li>      <li><a href="#"></a></li>      <li><a href="#"></a></li>      <li><a href="#"></a></li>  </ul>  <div class="list-num-wp">    <div id="list-num" class="list-num fn-clear">      <a href="#" class="hover"></a>      <a href="#"></a>      <a href="#"></a>      <a href="#"></a>    </div>  </div>  <div class="left">    <a id="left" href="#"></a>  </div>  <div class="right">    <a id="right" href="#"></a>  </div></div>

.banner{position:relative;width:624px;height:200px;overflow:hidden;}.banner .list-banner{position:absolute;width:5000px;}.banner .list-banner li{float:left;width:624px;height:200px;}.banner .list-num-wp{position:absolute;bottom:7px;width:624px;height:11px;}.banner .list-num{width:100px;margin:0 auto;}.banner .list-num a{display:inline;float:left;width:11px;height:11px;margin:0 7px; background:url(../images/list-num.png) no-repeat;}.banner .list-num a:hover{background:url(../images/list-num-hover.png));}.banner .list-num a.hover{background:url(../images/list-num-hover.png);}.banner .left a{display:block;position:absolute;width:49px;height:49px;top:75px;left:4px;background:url(../images/arrow.gif) 0 0;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}.banner .right a{display:block;position:absolute;width:49px;height:49px;top:75px;right:4px;background:url(../images/arrow.gif) 0 -49px;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}

Iii. Script ideas

1. The left button function is enabled.

Window. onload = function () {var prev = document. getElementById ("left"); var next = document. getElementById ("right"); var list_banner = document. getElementById ("list-banner"); next. onclick = function () {list_banner.style.left = parseInt (list_banner.style.left)-624 + 'px '; // note: the ul on html needs to add the line style left: 0 ;, otherwise it cannot be moved here} prev. onclick = function () {list_banner.style.left = parseInt (list_banner.style.left) + 624 + 'px ';}}

2. The two sentences clicked by the left and right buttons are similar and encapsulated into functions.

function animate(offset){    list_banner.style.left=parseInt(list_banner.style.left)+offset+'px';}next.onclick=function(){    animate(-624);}prev.onclick=function(){    animate(624);}

3. Unlimited scrolling

① False plot practices

That is, the image is 412341. When it is smaller than the last position, it returns to the first position. When it is greater than the first position, it is pulled to the last position.

function animate(offset){  var newLeft=parseInt(list_banner.style.left)+offset;  list_banner.style.left=newLeft+'px';  if(newLeft<-2496){    list_banner.style.left=-624+"px";  }  if(newLeft>-624){    list_banner.style.left=-2496+"px";  }}

4. switch between the dot and the left button

var index=1;function showDot(){  for(var i=0;i<list_num.length;i++){    list_num[i].className="";  }  list_num[index-1].className="hover";}next.onclick=function(){  animate(-624);  index++;  if(index>4){    index=1;  }  showDot();}prev.onclick=function(){  animate(624);  index--;  if(index<1){    index=4;  }  showDot();}

5. Click the dot to scroll and switch between the dots.

for(var i=0;i<list_num.length;i++){  list_num[i].onclick=function(){    if(this.className=="hover"){      return;    }    var myIndex=parseInt(this.getAttribute("index"));    var offset=-624*(myIndex-index);    index=myIndex;    animate(offset);    showDot();  }}

① When you do not execute the following code

②

<div class="list-num-wp">    <div id="list-num" class="list-num fn-clear">      <a index="1" href="#" class="hover"></a>      <a index="2" href="#"></a>      <a index="3" href="#"></a>      <a index="4" href="#"></a>    </div></div>

The key is to obtain the number of images clicked. You cannot directly var myIndex = this. index; Because index is a custom attribute, dom built-in attributes can be obtained through vertices. Custom Attributes cannot be obtained ,. getAttribute () can be used to obtain custom attributes and built-in dom attributes.

③ Update the index value, index = myIndex;

6. animation functions (there is a gradual movement process)

Function animate (offset) {animated = true; var newLeft = parseInt (list_banner.style.left) + offset; var time = 300; // total displacement time var interval = 30; // shift interval var speed = offset/(time/interval); // distance between each movement speed = speed> 0? Math. ceil (speed): Math. floor (speed); // decimal places may exist. Take the entire function go () {if (speed <0 & parseInt (list_banner.style.left)> newLeft) | (speed> 0 & parseInt (list_banner.style.left) <newLeft) {// newLeft target value list_banner.style.left = parseInt (list_banner.style.left) + speed + 'px '; setTimeout (go, interval); // do more than one motion (go function), move forward every 30 milliseconds} else {animated = false; list_banner.style.left = newLeft + 'px '; if (newLeft <-2496) {list_banner. Style. left =-624 + "px";} if (newLeft>-624) {list_banner.style.left =-2496 + "px" ;}} go ();} next. onclick = function () {if (! Animated) {index ++;} if (index> 4) {index = 1 ;}showdot (); if (! Animated) {animate (-624) ;}} prev. onclick = function () {if (! Animated) {index --;} if (index <1) {index = 4;} showDot (); if (! Animated) {animate (624) ;}for (var I = 0; I <list_num.length; I ++) {list_num [I]. onclick = function () {if (this. className = "hover") {return;} var myIndex = parseInt (this. getAttribute ("index"); var offset =-624 * (myIndex-index); index = myIndex; showDot (); if (! Animated) {animate (offset );}}}

① A function continuously calls itself after a condition. This method is called recursion. Here, recursion can be used to achieve the animation effect of the animation function.

② Non-stop means that the animate function is constantly called, which may cause freezing and image flooding. optimization is required and the variable animated is introduced.

7. automatic playback

function autoplay(){    timer=setInterval(function(){      next.onclick();    },1000)}function stopautoplay(){    clearInterval(timer);}banner.onmouseover=stopautoplay;banner.onmouseout=autoplay;autoplay();

SetTimeout is executed only once. Previously, it was executed because of recursion.

The interval of setInterval

8. Optimize a false image

In actual use, images must be stored in order. Therefore, it is best to generate fake Images Using js instead of writing them on html.

var img_first=list_banner.getElementsByTagName("li")[0];var img_last=list_banner.getElementsByTagName("li")[3];list_banner.appendChild(img_first.cloneNode(true));list_banner.insertBefore(img_last.cloneNode(true),list_banner.getElementsByTagName("li")[0]);

AppendChild is after adding a new node to the last child node of the target

InsertBefore is before adding a new node to an existing subnode.

CloneNode method. "true" indicates deep cloning. "false" indicates light cloning. "Deep cloning" means copying both the label and the content in the label, but not copying the content.