实现轮播地图的js原生代码示例

旋转图片是网页上最常见的效果之一。旋转图片的功能有不同的要求和不同的效果。我们看到了很多不同的方法来达到这种效果，但是很多都比较麻烦，不容易理解，不兼容。这里分享一下，用js原生代码实现轮播的常见效果！思路清晰，重复性高，也包含了现在网页上转盘所达到的几乎所有效果！

首先，现在让我们来看看它是什么效果，并剪一张图片给大家看：

第二，不管我们做什么特效，一定要记住一个原则，先写静态代码，再做动态处理！

我们的转盘静态效果是用html和css实现的：

1.为了规范代码，我们使用css和js进行扩展，如下所示：

2.身体部位也需要我们标准化的命名：

好了，我们的html部分到此结束！现在框架已经构建完成，下一步是css样式设置：

3.css样式的设置更加灵活，因为它应该根据我们的页面进行设置和指定。以下效果仅供参考！让我们直接编码：

/*内外边距设置*/* { margin :0；划水：0；}/*图片在框中的位置*/img {垂直对齐：顶部；}/*盒子盒子的整体风格*/。css _ box { width: 500px高度： 265 px；margin:100px auto相对位置：飞越：隐藏；border: 1px纯绿色；}/*滚动框样式*/。滑块{ width: 500px高度： 200 px；border: 1px纯红；}/*滚动框主要部分的样式*/。滑块-主{边框： 1px实心黄色；宽度： 500 px；高度： 200 px；}/*滚动框主要部分的图片样式*/。滑块-主-img {位置：绝对；top : 0；left : 0；宽度： 500 px；高度： 200 px；}.滑块-主-img img { width : 100%；}/*两侧滚动控件的样式*/。slider _ ctrl { text-align : center；衬垫-top : 25px；}/*在html中找不到，但是它起作用，所以只能在js中创建这样的类名！*//*控制转盘的样式*/。slider-ctrl-con { width : 24px；height: 20pxdisplay : inline-block；背景：url(./images/icon . jpg)no-repeat-24px-782 px；margin: 0 5pxcursor:指针；text-indent :-20em；飞越：隐藏；}.当前{背景-位置：-24px-762 px；}/*滑动控件的两种跨度样式*/。滑块-ctrl-prev，滑块-ctrl-next {位置：绝对；top : 50%；页边距-top :-35px；背景：url(./images/icon . jpg)no-repeat 6px top；宽度： 30px；height: 35pxopacity: 0.8cursor:指针；}.滑块-ctrl-prev { left : 0；}.滑块-ctrl-next { right : 0；背景-位置：-6px-44px；}/*css样式暂时到此结束*/

好了，我们的静态效果已经在这里设置好了。如果我们想实现我们需要的功能，js是我们的核心，让我们使用本机代码来实现它：

关键技术1:我们的转盘应该移动。利用定时器的自动滚动效果，图片的转换涉及到级联。最后，我们会考虑浏览器的兼容性！

做到这一点是我们js的第一步。等等，因为几乎所有的轮播都要达到这些效果，如果我们可以再做一个包，随时调用，岂不是完美？

是的，这就是我们要做的！

我在这里封装了一个名为animate的函数，我们只需要在函数封装后调用它：

//这是一个多属性的运动帧！//创建一个名为animate的函数！Obj是对象，json是json值，fn是回调函数！函数animate(obj，json，fn){ clearInterval(obj . timer)；//清除计时器，这一步有影响！//为对象设置定时器！obj . timer=setInterval(function(){ var flag=true；//用于判断计时器何时停止！//对于in循环，遍历json对象！for(JSON中的var attr){ var current=0；//当前状态，这一步很重要！if(attr=='不透明度'){ current=parsent(getStyle(obj，attr)* 100)；} else { current=ParSeint(GetStyle(obj，attr))；}//步长！var step=(JSON[attr]-current)/10；步骤=步骤0？数学天花板(台阶):数学地板(台阶)；//判断透明度！If(attr=='opacity') {//in是二进制运算符，表示第一个操作数的值是第二个操作数的属性名，返回true！//这样就可以判断这个对象的样式中是否有不透明度属性！If(' obj.style中的不透明度'){//如果条件成立，则设置透明度值obj . style .不透明度=(current step)/100；}else{ //如果不是，使用filter函数！obj.style.filter='alpha(不透明度='(当前步骤)')'；} }//级联！else if(attr==' zIndex '){ obj . style . zIndex=JSON[attr]；}else{obj.style[attr]=当前步骤“px”；}//截止值！if(当前！=JSON[attr]){ flag=false；} } if(flag){ clearInterval(obj . timer)；//有回调就用！if(fn){ fn()；}}}，5)}//考虑兼容性问题！函数getStyle(obj，attr){ if(obj . currentstyle){ return obj . currentstyle[attr]；} else { return window . getcomputedstyle(obj，null)[attr]；} }//多属性运动帧结束！

关键技术2:有了animate的封装功能，节省了我们很多的精力，但是我们还是要面对不必要的需求

有不同的效果，让我们实现具体的效果吧！

1.我们用js的第一步，从古至今没有变过：获取所有需要的元素，也就是DOM的操作：

2.执行for循环并开始遍历所有图片内容：

3.遍历按钮：

4.设置设置平方函数：

5.设置计时器：

6.鼠标经过时的效果：

以上js原生代码实现轮播的插图是边肖分享的全部内容，希望能给大家一个参考和支持。