无缝衔接轮播图

最新推荐文章于 2024-03-18 23:11:45 发布

爱哭的孩子有糖吃

最新推荐文章于 2024-03-18 23:11:45 发布

阅读量283

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_42496965/article/details/105116019

版权

无缝轮播图的效果是点击左右按钮时图片往左或往右慢慢移动
布局样式：
*{margin: 0;padding: 0;}.box{width: 1281px;height: 325px;margin: 0 auto;position: relative;overflow: hidden;}.content{position: absolute;}#tbox{width: 1281px;height: 325px;float: left;/* position: absolute; */}#leftButton , #rightButton{width: 52px;height: 52px;position: absolute;left: 0;top: 50%;margin-top: -26px;}.box #rightButton{left: 100%;margin-left: -52px;}

js代码：

在这里插入图片描述

lbt.js：
$function animate( ele , target , attr, sport_type = "swing" , sd){if( attr === "opacity"){var inow = parseInt(getComputedStyle( ele )[attr]) * 100;target = target * 100;}else{var inow = parseInt(getComputedStyle(ele)[attr]);}var timer = null ;clearInterval(ele.timer);ele.timer = setInterval(function(){if(sport_type === "swing"){sd = ( target - inow ) / 10;sd = sd > 0 ? Math.ceil(sd) : Math.floor (sd);}else if(sport_type === "liner" ){sd = sd === undefined ? 5 : sd ;sd = inow < target ? Math.abs(sd) : -Math.abs(sd);// inow += sd;}if( Math.abs(target - inow) <= Math.abs (sd) ){clearInterval(ele.timer);if( attr === "opacity" ){ele.style[attr] = target / 100 ;}else{ele.style[attr] = target + "px";}}else{inow += sd ;if( attr === "opacity" ){ele.style[attr] = inow / 100 ;}else{ele.style[attr] = inow + "px";}}},30)}$
在这里插入图片描述
效果：