页面实现图片循环轮播滚动效果，图片跑马灯效果

1.效果

2.完整html页面代码：

<!DOCTYPE html>

<title>图片循环滚动</title>

<style>

#box div, box ul,box li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}

#box ol, box ul ,box li{list-style:none}

#box img {border: 0; vertical-align:middle}

#box .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px}

#box a{color:#000000;text-decoration:none}

#box a:hover{color:#BA2636;text-decoration:underline}

#box{width:925px; margin:20px auto; padding:2px;color:#000000;background:#FFF; text-align:center}

#Marquee_x { overflow:hidden; width: 925px }

#Marquee_x ul li ,#Marquee_x ul li div{ float:left;line-height:25px;overflow:hidden}

#Marquee_x ul li div{ float:left;line-height:25px; width:142px; overflow:hidden}

#Marquee_x ul li div img{ border:1px solid #DADADA; width:140px; height:130px; display:block}

#Marquee_x ul li div span{ display:block;font-size: 12px;line-height:16px;}

</style>

(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)

$(function(){

$('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 });

//10px代表间距,20代表滚动速度

});

</script>

</head>

<body>

<div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.3.15ea397fwbW3VD&id=619159500532" target="_blank"><img src="https://gd1.alicdn.com/imgextra/i4/1035244808/O1CN01BlGPxi1lO6t5k0GRA_!!1035244808.jpg"><span>2020短袖t恤男士潮牌夏季潮流纯棉夏装T恤男装上衣</span></a></div>

<div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.5.15ea397fwbW3VD&id=619161180900" target="_blank"><img src="https://gd2.alicdn.com/imgextra/i1/1035244808/O1CN01Kp7KtR1lO6t67lvpt_!!1035244808.jpg"><span>男短袖T恤圆领爆款t恤2020夏季新款潮流半袖男装体恤衫</span></a></div>

<div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.7.15ea397fwbW3VD&id=619718242434" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i3/1035244808/O1CN01fS7ugn1lO6t5j9pcI_!!1035244808.jpg"><span>短袖T恤男装2020夏季新款宇宙翅膀图案圆领潮牌衣服</span></a></div>

<div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.9.15ea397fwbW3VD&id=619726198924" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i2/1035244808/O1CN01mvr2ws1lO6tA6fXXJ_!!1035244808.jpg"><span>2020年夏季纯棉短袖男士t恤男潮牌潮流韩版修身体桖</span></a></div>

</li>

</li>

</ul>

</div>

</body></html>

向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti