웹 라운드 맵 위아래 또는 좌우 스크롤

26036 단어 web
<div class="wrap scrollleft" style="height: 475px;">
						<ul>
							<li><img id="msgSpan" src="views/images1/lunbosan.png" alt="fsdf" 
									height="85.5px" width="100%">li>
									<li><img id="msgSpan2" src="views/images1/lunbosan.png" alt="fsdfs" 
										height="85.5px" width="100%">li>
							 
							<li><img id="msgSpan3" src="views/images1/lunbosan.png" alt="fsd" 
									height="85.5px" width="100%">li>
							<li><img id="msgSpan4" src="views/images1/lunbosan.png" alt="fdsfds" 
									height="85.5px" width="100%">li> 
						ul>
					div>
	<script>
					// };

					$.fn.imgscroll = function (o) {
						var defaults = {
							speed: 20, // 
							amount: 1, // 
							width: 1, // 
							dir: "up" // "left"   "up"  
						};
						o = $.extend(defaults, o);

						return this.each(function () {
							var _li = $("li", this);
							_li.parent().parent().css({
								overflow: "hidden",
								position: "relative"
							}); //div
							_li.parent().css({
								margin: "0",
								padding: "0",
								overflow: "hidden",
								position: "relative",
								"list-style": "none"
							}); //ul
							_li.css({
								position: "relative",
								overflow: "hidden"
							}); //li
							if (o.dir == "left") _li.css({
								float: "left"
							});

							// 
							var _li_size = 0;
							for (var i = 0; i < _li.size(); i++)
								_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);

							// 
							if (o.dir == "left") _li.parent().css({
								width: (_li_size * 3) + "px"
							});
							_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
							_li = $("li", this);

							// 
							var _li_scroll = 0;

							function goto() {
								_li_scroll += o.width;
								if (_li_scroll > _li_size) {
									_li_scroll = 0;
									_li.parent().css(o.dir == "left" ? {
										left: -_li_scroll
									} : {
										top: -_li_scroll
									});
									_li_scroll += o.width;
								}
								_li.parent().animate(o.dir == "left" ? {
									left: -_li_scroll
								} : {
									top: -_li_scroll
								}, o.amount);
							}

							// 
							var move = setInterval(function () {
								goto();
							}, o.speed);
							_li.parent().hover(function () {
								clearInterval(move);
							}, function () {
								clearInterval(move);
								move = setInterval(function () {
									goto();
								}, o.speed);
							});
						});
					};

					$(document).ready(function () {

						$(".scrollleft").imgscroll({
							speed: 20, // 
							amount: 1, // 
							width: 1, // 
							dir: "up" // "left"   "up"  
						});

					});
					console.log(" ")
				</script>

좋은 웹페이지 즐겨찾기