/**
* @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);
});
});
一个让图片平滑移动的js小代码
猜你喜欢
转载自blog.csdn.net/ldf_tch/article/details/79278818
今日推荐
周排行