基于JavaScript的聚焦地图轮播效果的实现

无论是大学的网站，还是电子商务的页面，焦点图的切换和轮播应该是不可或缺的应用。今天我就重点地图轮播制作的技术要点做个笔记，供大家以后参考。

1.结构层

焦点图的HTML结构很简单，就是一个父容器(id=box)，里面包含三个子容器，分别存储图片(id=pics)、底部按钮(id=dots)和动作切换箭头(class=turn)。添加样式后，就是下面图2中的布局。

第二，表示层

页面的表达和风格总是离不开CSS。为了描述方便，id选择器名称或类选择器名称用于表示每个div模块。

1 .盒子

作为父容器，box是整个焦点图轮播结构在网页上的可视化表示，它的宽度和高度就是要显示的图片的宽度和高度。我把图片设置为600px宽，400px高，这样父容器框就显示在中间，并有阴影。风格可以根据自己的口味设置，但溢出一定要隐藏，定位一定要设置为相对定位，这样才能使子容器的绝对定位准确。

# box { width: 600px高度： 400 px；边距-top : 100 px；左边距left: auto右边距：自动；飞越：隐藏；相对位置：box-shadow : 10px 10px 5px # 888；}2 .图片

Pics用来放置图片，因为是左右切换功能，高度还是一张图片的高度，但是宽度=(显示图片数量2)*图片宽度，原因在行为层说明。

另外需要注意的是，pics在左右切换箭头和底部切换按钮的下方，所以z-index应该设置为1。

# pics { width: 5400px高度： 400 px；绝对位置：z-index : 1；}3 .点

将z-index设置为2，并将其设置为上部显示；定位就是绝对定位；其他风格随您的喜好而定。在这里，我设置了鼠标滑动样式和js中图片位置变化对应的样式(on)。

# dots { width: 120pxheight: 10px绝对位置：bottom: 25px左： 40%；z-index : 2；} #点跨度{ width: 10pxheight: 10px向左浮动：右边距： 5px；背景技术： # 333；border:固体1px # FFF；边界半径：50%；cursor:指针；} #点。在{ background: orangered} #点span:hover{background:橙色；}4 .转身

左箭头和右箭头的重要样式与点一致，其他样式是定制的。在这里，我将鼠标设置为在箭头出现之前滑过该框。转动{ width: 40px高度： 40px；color: # fff背景：橙色；线高： 39px；文本对齐：中心；font-size : 36px；font-weight:粗体；opacity: 0.5绝对位置：top: 180pxdisplay:无；z-index : 2；cursor:指针；} . turn : hover { opa city 3360 0.8；}#box:hover。转动{ display:块；}到目前为止，页面的样式和布局已经完成，但行为层方法和功能的实现才是重点。

第三，行为层(JavaScript)

在定义函数之前，获取页面在全局范围内的节点。

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.画面切换动画

旋转图片的核心方法在于图片的切换动画。这个函数的重点是接收一个偏移量，然后改变pics相对于box的左值，从而显示图片。

之前由CSS设置，盒子的宽度是600px，但是pics的宽度是5400px。因为框溢出隐藏，页面上只会显示一张图片；通过接收特定的位移偏移并改变左值(减去或加上n个图片的宽度)，可以改变显示的图片。

此外，还有两个问题。如果不设置画面切换速度，整个画面都会变换，不会有切换效果；而且，如果一直点击开关，会消耗太多内存，导致电脑堵塞，上一张图片切换之前会出现下一页。因此，有必要对图片进行速度处理，切换后图片不允许切换。

//画面切换功能函数turn(offset){ turn=true；//切换权限标志，在全局范围内定义。true表示关闭开关权限var new _ left=par sent(pics . style . left)偏移量；//最后一个左值var total _ time=300//总位移时变间隔=10；//每个位移间隔时间变化速度=偏移/(total _ time/interval)；//位移速度为——，位移为function go(){ if((speed 0 paseint(pics . style . left)new _ left)| |(speed 0 paseint(pics . style . left)new _ left)){//右剪| |左剪pics . style . left=par sent setTimeout(go，interval)；} else { turned=false//切换已经完成。pics.style.left=new_left 'px '可以打开。if(new _ left-4200){ pics . style . left=-600 ' px '；} else if(new _ left-600){ pics . style . left=-4200 ' px '；} } } go()；}2.箭头切换

上传参数的基础上画面切换功能转()。因为是左右切换，一次直接传入一个画面宽度。向右切换传入-600，向左切换传入600。

这里要注意的是画面与底部按钮的同步，两侧最后一张画面后参数的重置，是否允许切换的判断。

//箭头开关接下来实现。onclick=function(){ if(index==7){ index=1；} else { index=1；}显示_点()；if(！转过){转(-600)；} };pre . onclick=function(){ if(index==1){ index=7；} else { index-=1；}显示_点()；if(！转){转(600)；} };3.底部按钮实现

按钮和箭头的区别在于，您可以通过单击来切换到任何图片，因此您应该在将参数传递给switch函数turn()之前进行计算。另外，按钮对应样式的变化也不能忘记。

//按钮切换样式函数show _ dots(){ for(var I=0；I点.长度；i ){ if(dots[i]。){ dots[i]。className=打破；} }点[索引- 1]。类名=' on}//按钮开关实现为(var I=0；I点.长度；i ){ dots[i]。onclick=function(){ if(this . class name=' on '){ return；} var my _ index=ParSeint(this . GetAttribute(' index '))；//注意！Index是一个自定义属性var offset=-600 *(my _ index-index)；//计算开关位移if(！转向){转向(偏移)；} index=my _ indexshow _ dots()；} }4.自动播放

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

//定时动画函数play(){ time=set interval(function(){ next . onclick()；},3000);}//动画停止功能stop () {clearinterval(时间)；} play()；box.onmouseover=stopbox.onmouseout=play最后，附上演示和源代码的链接：演示和源代码。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。