时间:2021-07-01 10:21:17 帮助过:11人阅读
那么本篇文章介绍得就是怎么用js实现图片轮播及滑动式的效果,希望对需要的朋友们有所帮助。
js实现轮播图具体代码示例如下:
//HTML代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现轮播图原理及示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <!--从左向右滑动--> <nav> <ul id="index"> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul id="img"> <li><img src="img1.jpg" alt="img1"></li> <li><img src="img2.jpg" alt="img2"></li> <li><img src="img3.jpg" alt="img3"></li> <li><img src="img4.jpg" alt="img4"></li> <li><img src="img5.jpg" alt="img5"></li> </ul> </nav> <script src="script.js"></script> </body> </html>
//css代码部分 *{ margin:0; padding:0; } nav{ width: 720px; height: 405px; margin:20px auto; overflow: hidden; position: relative; } #index{ position: absolute; left:320px; bottom: 20px; } #index li{ width:8px; height: 8px; border: solid 1px gray; border-radius: 100%; background-color: #eee; display: inline-block; } #img{ width: 3600px;/*不给宽高无法移动*/ height: 405px; position: absolute;/*不定义absolute,js无法设置left和top*/ z-index: -1; } #img li{ width: 720px; height: 405px; float: left; } #index .on{ background-color: black; }
//js代码部分 function moveElement(ele,x_final,y_final,interval){//ele为元素对象 var x_pos=ele.offsetLeft; var y_pos=ele.offsetTop; var dist=0; if(ele.movement){//防止悬停 clearTimeout(ele.movement); } if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动 return; } dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成 x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist; dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成 y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist; ele.style.left=x_pos+'px'; ele.style.top=y_pos+'px'; ele.movement=setTimeout(function(){//分10次移动,自调用10次 moveElement(ele,x_final,y_final,interval); },interval) }
注:
图片移动函数moveElement()需要获取图片现在的位置以及目标位置并计算它们之间的差距进行移动,可以用offsetLeft和offsetTop获取图片现在的位置。图片移动时“划过”的效果是将距离分成好10次进行移动,即利用setTimeOut函数,然而为了防止鼠标悬停,需调用clearTimeout()函数。
【相关文章推荐】
实例详解jquery实现左右轮播图效果
CSS3实现轮播图效果
JS轻松实现轮播图
两种js实现轮播图的方式
以上就是怎么用简单的js代码实现轮播图滚动效果?的详细内容,更多请关注Gxl网其它相关文章!