星空网 > 软件开发 > Java

原生JavaScript实现焦点图轮播

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

 

一、结构层(HTML)

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

                   原生JavaScript实现焦点图轮播原生JavaScript实现焦点图轮播

二、表示层(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].onclick= 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、源码。




原标题:原生JavaScript实现焦点图轮播

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

疫情期间,东南亚电商发展的三大趋势:https://www.kjdsnews.com/a/553666.html
亚马逊封号潮下,卖家们凭借这么做实现自救?速卖通和Lazada成为首选:https://www.kjdsnews.com/a/553667.html
做Shopify需要VAT吗?附VAT注册方法:https://www.kjdsnews.com/a/553668.html
eBay SpeedPAK物流管理政策重要更新:https://www.kjdsnews.com/a/553669.html
亚马逊自配送顶配神器!保障有效追踪率!:https://www.kjdsnews.com/a/553670.html
亚马逊Listing调整得好叫优化,调整不好叫破坏:https://www.kjdsnews.com/a/553671.html
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流