原生JavaScript实现焦点图轮播

红太狼 2023-08-17 17:45 57阅读 0赞

不管是高校的网站还是电商的页面，焦点图的切换和轮播应该是一项不可或缺的应用。今天把焦点图轮播制作的技术要点做下笔记，以供日后查看。

**一、结构层（HTML）**

焦点图的HTML结构很简单，就是一个父容器（id=box），包含三个子容器，分别存放图片（id=pics）、底部按钮（id=dots）、作用切换箭头（class=turn）。加上样式后就是下图二的布局。

![1123168-20170322202850158-255364086.png][]![1123168-20170326193517768-2055407997.png][]

**二、表示层（CSS）**

页面的表现和风格总是离不开CSS。为叙述方便，后面采用id选择符名或类选择符名代表各div模块。

**1.box**

box作为父容器，是整个焦点图轮播结构在网页的直观表现，它的宽高就是要显示的图片的宽高。我将图片设置为宽600px、高400px，使父容器box居中显示，并加了阴影。样式大概都可以随自己爱好设置，但**溢出一定要隐藏**，**定位一定要设置为相对定位**，以使子容器的绝对定位准确。

#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用于放置图片，因为是制作左右切换功能，高仍是一张图片的高，但宽=（展示的图片数量+2）\*图片宽，原因在行为层再说明。

另外需要注意的是，由展示图片可知，pics在左右切换箭头和底部切换按钮的下层，所以z-index要设为1。

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

**3.dots**

z-index设为2，置为上层显示；定位为绝对定位；其他样式随喜好。这里我设置了鼠标滑过的样式，以及配合js对应图片位置改变的样式（on）。

#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**

左右箭头的重要样式与dots一致，其他自定义。这里我设置了鼠标滑过box，才显现箭头。

.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;}

至此页面的样式和布局完成，但行为层方法和功能的实现才是重点。

**三、行为层（JavaScript）**

**　　**定义函数前，先在全局作用域中获得页面的节点。

1 var box = document.getElementById('box');
    2 var pics = document.getElementById('pics');
    3 var dots = document.getElementById('dots').getElementsByTagName('span');
    4 var pre = document.getElementById('pre');
    5 var next = document.getElementById('next');

**1.图片切换动画**

轮播图的核心方法，在于图片的切换动画。而此函数的重点，是接收一个位移量offset，然后改变pics相对于box的left值，从而对图片进行显示。

之前CSS设置的，box的宽为600px，但pics的宽却为5400px，由于box溢出隐藏，所以页面只会显示一张图片；通过接收具体位移量offset，改变left值（减去或加上n个图片宽度），就可以改变显示的图片。

此外还有两个问题，如果不设置图片切换的速度，图片就会整张整张的变换，没有进入切换的效果；而且如果不停的点击切换，就会消耗太多的内存造成电脑卡机，出现页面停在前一张图未切换完就出现下一张等情况。所以要对图片做一个速度处理，以及一张图片为切换完就不允许其他切换的设置。

1     //图片切换函数
     2     function turn(offset){ 
     3         turned = true;                                      //切换允许标志，在全局作用域中定义，true表示关闭允许切换
     4         var new_left = parseInt(pics.style.left) + offset;  //最后left值
     5         var total_time = 300;                               //位移总时间
     6         var interval = 10;                                  //每次位移间隔时间
     7         var speed = offset/(total_time/interval);           //位移速度——每次位移量
     8 
     9         function go(){
    10             if((speed < 0 && parseInt(pics.style.left) > new_left) || (speed > 0 && parseInt(pics.style.left) < new_left)){ //右切||左切
    11                 pics.style.left = parseInt(pics.style.left) + speed +'px';
    12                 setTimeout(go,interval);
    13             }else{
    14                 turned = false;     //已切换完毕，开启允许切换
    15                 pics.style.left = new_left +'px';
    16                 if( new_left < -4200){
    17                     pics.style.left = -600 +'px';
    18                 }
    19                 else if( new_left > -600){
    20                     pics.style.left = -4200 +'px';
    21                 }
    22             }
    23         }
    24         go();
    25     }

**2.箭头切换**

在图片切换函数turn()基础上传入参数。因为是左右切换，所以每次直接传入一个图片宽度。向右切换传入-600，左切传入600。

这里要注意的就是，图片与底部按钮的同步，到两边的最后一张后参数的重置，以及是否允许切换的判断。

1     //箭头切换实现
     2     next.onclick = function(){
     3         if(index == 7){
     4             index = 1;
     5         }else{
     6             index += 1;
     7         }
     8         show_dots();
     9         if(!turned){
    10             turn(-600);
    11         }
    12     };
    13     pre.onclick = function(){
    14         if(index == 1){
    15             index = 7;
    16         }else{
    17             index -= 1;
    18         }
    19         show_dots();
    20         if(!turned){
    21             turn(600);
    22         }
    23     };

**3.底部按钮实现**

按钮与箭头的不同，在于点击它可以切换到任意一张图片，所以在对切换函数turn()传入参数前要先做一个计算。另外按钮对应样式的变化也不能忘记。

1     //按钮切换样式
     2     function show_dots(){
     3         for(var i = 0; i < dots.length; i++){
     4             if(dots[i].className == 'on'){
     5                 dots[i].className = '';
     6                 break;
     7             }
     8         }
     9         dots[index - 1].className = 'on';
    10     }
    11     //按钮切换实现
    12     for(var i = 0; i < dots.length; i++){
    13         dots[i].οnclick= function(){
    14             if(this.className == 'on'){
    15                 return;
    16             }
    17             var my_index = parseInt(this.getAttribute('index'));   //注意! index是自定义属性
    18             var offset = -600 * (my_index - index);　　　　　　　　　//计算切换位移量
    19 
    20             if(!turned){
    21                 turn(offset);
    22             }
    23             index = my_index;
    24             show_dots();
    25         }
    26     }

**4. 自动播放**

自动播放自然就是设置定时器和清除定时器的问题，这里不再赘述。

1     //定时动画
     2     function play(){
     3         time = setInterval(function(){
     4             next.onclick();
     5         },3000);     
     6     }
     7     //动画停止
     8     function stop(){clearInterval(time);}
     9 
    10     play();
    11     box.onmouseover = stop;
    12     box.onmouseout = play;

**最后附上demo和源码链接：[demo][]、[源码][Link 1]。**

转载于:https://www.cnblogs.com/Livia-Peng/p/carousel.html

[1123168-20170322202850158-255364086.png]: https://images2015.cnblogs.com/blog/1123168/201703/1123168-20170322202850158-255364086.png
[1123168-20170326193517768-2055407997.png]: /images/20230808/d65f055f21dc4db491fa75d46f0c4df0.png
[demo]: http://123.207.0.184/pics_carousel/carousel.html
[Link 1]: https://github.com/Livia-Peng/test_demo/tree/master/pics_carousel