当前位置:首页 > 站长笔记 > javascript笔记 > 正文
运行天数:2908 天 最后更新:2020-4-7

jq图片连续滚动代码jQuery-jcMarquee.js

用手机或者平板电脑扫描应用扫描本二维码,可以在手机浏览器继续浏览,也可以分享给你的联系人。

2020年02月15日 | 作者: 影子 | 分类: javascript笔记 | 点击量: 102

本代码支持同页面多个滚动效果.

需引入jquery-1.7.2.min.js

jQuery-jcMarquee.js代码

;(function($){
$.fn.jcMarquee = function(options) {
var defaults = {
‘marquee’:’x’,
‘margin_bottom’:’0′,
‘margin_right’:’0′,
‘speed’:’10’
};
var options = $.extend(defaults,options);
return this.each(function() {
var $marquee = $(this),
$marquee_scroll = $marquee.children(‘ul’);
$marquee_scroll.append(“<li class=’clone’>”+”</li>”);
$marquee_scroll.find(‘li’).eq(0).children().clone().appendTo(‘.clone’);
var $marquee_left = $marquee_scroll.find(‘li’);
if (options.marquee == ‘x’) {
var x = 0;
$marquee_scroll.css(‘width’,’1000%’);
$marquee_left.find(‘div’).css({‘margin-right’:options.margin_right});
$marquee_left.css({‘margin-right’:options.margin_right});
function Marquee_x(){
$marquee.scrollLeft(++x);
_margin = parseInt($marquee_left.find(‘div’).css(‘margin-right’));
if(x==$marquee_left.width()+_margin) { x = 0 };
};
var MyMar=setInterval(Marquee_x,options.speed);
$marquee.hover(function(){
clearInterval(MyMar);
},function(){
MyMar=setInterval(Marquee_x,options.speed);
});
}
if (options.marquee == ‘y’) {
var y = 0;
$marquee_scroll.css(‘height’,’1000%’);
$marquee_left.find(‘div’).css(‘margin-bottom’,options.margin_bottom);
$marquee_left.css(‘margin-bottom’,options.margin_bottom);
function Marquee_y(){
$marquee.scrollTop(++y);
_margin = parseInt($marquee_left.find(‘div’).css(‘margin-bottom’));
if(y==$marquee_left.height()+_margin) { y = 0 };
};
var MyMar=setInterval(Marquee_y,options.speed);
$marquee.hover(function(){
clearInterval(MyMar);
},function(){
MyMar=setInterval(Marquee_y,options.speed);
});
};
});
};
})(jQuery)

使用方法:

* 相关参数

‘marquee’:’x’, \\ 设置滚动方向,提供 marquee:x 或 marquee:y

‘margin_bottom’:’0′, \\ 设置margin_bottom值

‘margin_right’:’0′, \\ 设置margin_right值

‘speed’:’10’ \\ 设置滚动速度,单位mm

* 重要提醒

#Marquee_x ul li, #Marquee_x ul li div { float:left;} // 横向滚动时必须让所有li左浮动

* HTML结构

<div id=”Marquee”>

<ul>

<li>

<div><img height=”50″ width=”100″ alt=”图片1″ /></div>

<div><img height=”50″ width=”100″ alt=”图片2″ /></div>

<div><img height=”50″ width=”100″ alt=”图片3″ /></div>

<div><img height=”50″ width=”100″ alt=”图片4″ /></div>

</li>

</ul>

</div>

添加js代码

<script>

$(function(){

$(‘#Marquee’).jcMarquee({ ‘marquee’:’x’,’margin_right’:’10px’,’speed’:3 });

$(‘#Marquee_x’).jcMarquee({ ‘marquee’:’x’,’margin_right’:’10px’,’speed’:3 });
});

</script>


关键词:

本文网址:https://www.menglei.net/3662/,转载请以链接形式注明出处,谢谢合作!

作者:清晨@网站建设专家. | 清晨,领先的网站优化品牌。

交流QQ号:925474725 邮件支持:shadoweb@qq.com