Introduction to code cases using JavaScript to implement focus chart carousel effect (picture)

This article mainly introduces in detail the implementation of the focus image carousel effect based on JavaScript, which has a certain reference value. Interested friends can refer to it

Whether it is Whether it is a university website or an e-commerce page, the switching and carousel of focus images should be an indispensable application. Today I will take notes on the technical points of focus image carousel production for future review.

1. Structure layer (HTML)

The HTML structure of the focus map is very simple. It is a parent container (id=box), containing three sub-containers, which are stored separately. Pictures (id=pics), bottom buttons (id=dots), function switching arrows (class=turn). After adding the style, the layout is as shown in Figure 2 below.

## 2. Presentation layer (CSS)

The performance and style of the page are always Inseparable from CSS. For the convenience of description, the id selector name or class selector name is used to represent each p module.

1.box

As the parent container, box is the intuitive representation of the entire focus image carousel structure on the web page. Its width and height are the width and height of the image to be displayed. I set the image to be 600px wide and 400px high, centered the parent container box, and added a shadow. The style can probably be set as you like, but the overflow must be hidden, and the positioning must be set to relative positioning so that the

absolute positioning of the subcontainer is accurate.

#box{
 width: 600px;
 height: 400px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: hidden;
 position: relative;
 box-shadow: 10px 10px 5px #888;
}

2.pics

Pics is used to place pictures. Because it is a left-right switching function, the height is still the height of a picture, but the width = (number of pictures displayed + 2) * The picture is wide, the reason will be explained in the behavior layer.

Another thing to note is that, as can be seen from the displayed picture, PICs is underneath the left and right switching arrows and the bottom switching button, so

z-index should be set to 1.

#pics{
 width: 5400px;
 height: 400px;
 position: absolute;
 z-index: 1;
}

3.dots

Set the z-index to 2 and set it to upper display; the positioning is absolute positioning; other styles are as you like. Here I set the style for the mouse to slide over, and the style (on) to match the js corresponding image position change.

#dots{
 width: 120px;
 height: 10px;
 position: absolute;
 bottom: 25px;
 left: 40%;
 z-index: 2;
}
 
#dots span{
 width: 10px;
 height: 10px;
 float: left;
 margin-right: 5px;
 background: #333;
 border: solid 1px #FFF;
 border-radius: 50%;
 cursor: pointer;
}
 
#dots .on{background: orangered;}
#dots span:hover{background: orangered;}

4.turn

The important styles of the left and right arrows are consistent with dots, and other customizations can be made. Here I set the mouse to slide over the box before the arrow appears.

.turn{
 width: 40px;
 height: 40px;
 color: #fff;
 background: orangered;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 opacity: 0.5;
 position: absolute;
 top: 180px;
 display: none;
 z-index: 2;
 cursor: pointer;
}
.turn:hover{opacity: 0.8;}
#box:hover .turn{display: block;}

At this point, the style and layout of the page are completed, but the implementation of behavioral layer methods and functions is the focus.

3. Behavior layer (Javascript)

Before defining the function, first obtain the node of the page in the global scope.

var box = document.getElementById('box');
var pics = document.getElementById('pics');
var dots = document.getElementById('dots').getElementsByTagName('span');
var pre = document.getElementById('pre');
var next = document.getElementById('next');

1. Image switching animation

The core method of the carousel lies in the image switching animation. The focus of this function is to receive a displacement offset, and then change the left value of pics relative to the box to display the picture.

According to the previous CSS settings, the width of the box is 600px, but the width of the pics is 5400px. Since the box overflows and is hidden, only one picture will be displayed on the page; by receiving the specific displacement offset, the left value is changed ( Subtract or add n picture widths), you can change the displayed picture.

In addition, there are two problems. If you do not set the speed of picture switching, the picture will be transformed entirely, without the effect of switching; and if you keep clicking to switch, it will consume too much The memory of the computer causes the computer to freeze, and the page stops at the previous picture before switching to the next picture. Therefore, we need to perform speed processing on the pictures, and set the settings to not allow other switching after a picture is switched.

//图片切换函数
 function turn(offset){ 
 turned = true; //切换允许标志，在全局作用域中定义，true表示关闭允许切换
 var new_left = parseInt(pics.style.left) + offset; //最后left值
 var total_time = 300; //位移总时间
 var interval = 10; //每次位移间隔时间
 var speed = offset/(total_time/interval); //位移速度——每次位移量

 function go(){
 if((speed < 0 && parseInt(pics.style.left) > new_left) || (speed > 0 && parseInt(pics.style.left) < new_left)){ //右切||左切
 pics.style.left = parseInt(pics.style.left) + speed +&#39;px&#39;;
 setTimeout(go,interval);
 }else{
 turned = false; //已切换完毕，开启允许切换
 pics.style.left = new_left +&#39;px&#39;;
 if( new_left < -4200){
  pics.style.left = -600 +&#39;px&#39;;
 }
 else if( new_left > -600){
  pics.style.left = -4200 +&#39;px&#39;;
 }
 }
 }
 go();
 }

2. Arrow switching

Input parameters based on the image switching function turn(). Because it switches left and right, an image width is directly passed in each time. Switch to the right and input -600, switch to the left and input 600.

What should be noted here is the synchronization of the picture and the bottom button, the resetting of parameters after the last picture on both sides, and the judgment of whether switching is allowed.

//箭头切换实现
 next.onclick = function(){
 if(index == 7){
 index = 1;
 }else{
 index += 1;
 }
 show_dots();
 if(!turned){
 turn(-600);
 }
 };
 pre.onclick = function(){
 if(index == 1){
 index = 7;
 }else{
 index -= 1;
 }
 show_dots();
 if(!turned){
 turn(600);
 }
 };

3. Bottom button implementation

The difference between a button and an arrow is that you can switch to any picture by clicking it, so you must do this before passing in parameters to the switching function turn() A calculation. In addition, the changes in corresponding styles of buttons cannot be forgotten.

//按钮切换样式
 function show_dots(){
 for(var i = 0; i < dots.length; i++){
 if(dots[i].className == &#39;on&#39;){
 dots[i].className = &#39;&#39;;
 break;
 }
 }
 dots[index - 1].className = &#39;on&#39;;
 }
 //按钮切换实现
 for(var i = 0; i < dots.length; i++){
 dots[i].onclick= function(){
 if(this.className == &#39;on&#39;){
 return;
 }
 var my_index = parseInt(this.getAttribute(&#39;index&#39;)); //注意! index是自定义属性
 var offset = -600 * (my_index - index);　　　　　　　　　//计算切换位移量

 if(!turned){
 turn(offset);
 }
 index = my_index;
 show_dots();
 }
 }

4. Automatic playback

Automatic playback is naturally a matter of setting the

timer and clearing the timer, which I won’t go into details here.

//定时动画
 function play(){
 time = setInterval(function(){
 next.onclick();
 },3000); 
 }
 //动画停止
 function stop(){clearInterval(time);}

 play();
 box.onmouseover = stop;
 box.onmouseout = play;

Finally, attach the demo and source code links: demo, source code.

The above is the detailed content of Introduction to code cases using JavaScript to implement focus chart carousel effect (picture). For more information, please follow other related articles on the PHP Chinese website!