Gallery -- 横向不断滚动 demo

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
.divTestimional {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
cursor: pointer;
background-color: hsl(208, 65%, 98%);
padding: 10px;
}

.divLocation {
clear: both;
padding-top: 5px;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
display: inline-block;
float: left;
padding-right: 85px;
background: url("https://www.soldster.com/images/5stars.png") right top no-repeat;
}

.divText {
clear: both;
 350px;
padding-top: 10px;
margin: 0;
/*overflow: hidden;*/
text-overflow: ellipsis;
height: 100px;
}

ul, li {
list-style: none;
}

#Marquee_x {
overflow: hidden;
 100%;
margin-top: 50px;
}

#Marquee_x ul li, #Marquee_x ul li div {
float: left;
}
</style>
<script>
; (function ($) {
$.fn.jcMarquee = function (options) {
var defaults = {
'marquee': 'x',
'margin_bottom': '0',
'margin_right': '0',
'speed': '5'
};
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': 30 });
});
</script>
</head>
<body>
<form id="form1" runat="server">

<div style=" 1150px; margin: 10px auto;">
<div style=" 100%; margin-top: 30px;">
<div style="height: 20px; display: block">
<a style="float: right; cursor: pointer;" href="https://www.baidu.com/"> >> Review All</a>

</div>
<div id="Marquee_x">
<ul>
<li style="list-style-type: inherit">
<% List<Testimonial> records = GetData();
foreach (Testimonial t in records)
{ 
%>
<div class="divTestimional">

<b><%=t.Who %></b>
<label style="float: right;"><%=t.CreatedAt.ToString("MMM-dd yyyy") %></label>
<p class="divLocation">
<%=t.Location %>&nbsp;
</p>
<p class="divText">
<%=t.Text %>
</p>
</div>
<%
}
%>
</li>
</ul>
</div>
</div>
</div>


</form>
</body>
</html>