#精品
js轮播图技术编程教程

js轮播图技术编程教程

什么是HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

HTML是什么样的

简单地来说,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。

1.

小方块已经备好了,html和css不多说,从js开始
要对一个元素进行操作,我们必须先将它获取过来(放在一个变量里)
获取的方法有很多
var box = document.getElementById/TagName/ClassName(‘box’); 或者document.querySelector(‘#box’);
为了查看是否获取成功我们可以添加一个事件,例如点击它,弹出一个对话框
box.addEventListener(‘click’, function(){
alert(‘被点击了’);
}
如果成功出现了,就代表我们获取成功了

2.

这个小方块不断移动的原理是使用定时器(setInterval())不断在原来的位置(.offsetLeft获取)上加1,又返还给绝对定位的left让它移动一像素。当它移动到指定的位置时,会停下来;
现在来实现这个加一像素距离的效果
setInterval(function () {
bix.style.left = box.offsetLeft+1+’px’;
},15);js轮播图技术编程教程

3.

我们必须让它在一定范围内活动,所以必须有一个停止的条件,利用if对它运动的距离进行判断,清除掉定时器,就可以停止程序的运行。
if (box.offsetLeft>300){
clearInterval(timer); //这里的timer是你定时器的名称
}
完成了这个简单的功能,需要我们进行优化,将定时器封装于函数之中(方便多个轮播图的调用)
完整代码如下:
function fun(obj,target){
//参数分别是运动方块的名称和目标值
clearInterval(obj.timer);
//清除其他定时器,在多个事件时会产生叠加效果
obj.timer = setInterval(function () {
obj.style.left = obj.offsetLeft+1+’px’;
if (obj.offsetLeft>target) {
clearInterval(obj.timer);
}
});
}
fun(box,500);
//调用

4.

我们可以发现轮播图大都是缓慢的停下来的,而我们的小方块却是匀速运动,让每次的步长递减((目标-当前)/10)其实就可以实现了,在函数中可增加这样的一句
var step = (target-obj.offsetLeft)/10;
并将每次增加的1换为step;js轮播图技术编程教程

5.

step除10会有个小问题,产生小数让距离不准确,这样会使轮播图运动产生问题,我们用三元表达式,进行判断,大于0时向上取整,小于0向下取整。
step > 0 ? Math.ceill() : Math.floor();
自此一个小方块的运动实现了,我们可以把它等装在js中,进行调用js轮播图技术编程教程

资源下载此资源仅限注册用户下载,请先
客服QQ:776262893
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

未尽作者允许,禁止恶行转发,所以版权归原创者所以,如有违规永久封号。

梦凡源巢 编程技术 js轮播图技术编程教程 https://www.mengfan.co/1104.html

有些东西不是你原路返回就能找得回来的.

常见问题
  • 如果下载失败或者链接失效,请及时联系站长处理。谢谢配合
查看详情
  • 演示站只是用于观看实体模型。并非正常营业,所以有的演示站链接会失效。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务