一个让图片平滑移动的js小代码

最新推荐文章于 2024-06-01 20:47:43 发布

原创最新推荐文章于 2024-06-01 20:47:43 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

小插件专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了一个简单的JavaScript代码实现图片平滑移动的滑动效果。通过设置图片移动速度、滑块主体、滑块列表等参数，实现图片在鼠标悬停时停止滚动，离开时继续滚动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
* @param _speed 图片移动速度
* @param _slide 滑块主体
* @param _slide_ul 滑块列表
* @param _slide_total 图片列表本体
* @param _slide_left 图片列表左
* @param _slide_left 图片列表右
*/
var _speed=35;
var _slide = $("#slide");
var _slide_ul = $("#slide_ul");
var _slide_total = $("#slide_total");
var _slide_left = $("#slide_left");
var _slide_right = $("#slide_right");
if(_slide.width() > _slide_left.width()){
_slide_ul.html(_slide_ul.html() + _slide_ul.html());
}
_slide_right.html(_slide_left.html());
var a = 0;

/**
* @description 滑动方法
*/
function Marquee(){
/**
* @description 判断_slide到左侧距离，如果距离大于_slide_left的宽度，则移动到_slide的起始处，否则将_slide向左滑动1px。
*/
if(_slide.scrollLeft() >= _slide_left.width()){
_slide.scrollLeft(0);
}else{
_slide.scrollLeft(_slide.scrollLeft()+1);
}
}

/**
* @description 即时调用方法，当页面加载之后立刻执行
*/
$(function(){
/**
* 执行循环任务，每过_speed毫秒执行一次Marquee（滑动）方法
* @type {number}
*/
var sliding=setInterval(Marquee,_speed);
/**
* @description 当鼠标悬停于图片上，去除循环任务，移开再次启动循环任务。
*/
_slide.hover(function() {
clearInterval(sliding);
},function(){
sliding=setInterval(Marquee,_speed);
});
});