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>

你可能感兴趣的:(web)