首页导航博客电子书算法众创代码随贴关于我们

产品图片滚动减速效果,减速翻转效果,Sliderby 112738102qq.com

原生js写法

代码正文双击正文可选择全部

1[代码][javascript]

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>产品图片滚动减速效果,减速翻转效果,Slider(by 112738102@qq.com;)</title> 
<style> 
	ul{ margin:0; padding:0} 
	ul{ list-style:none;} 
	body{font:12px/1.2 "宋体"; } 
	.scroll_box{ position:relative; height:164px; width:766px; border:1px solid #efefef; overflow:hidden;} 
	.scroll_box .list{ overflow:hidden; zoom:1; position:absolute;} 
	.scroll_box .list li{ width:235px; height:164px; padding:0 10px; text-align:center; float:left;} 
	.scroll_box .list .info{ line-height:1.5} 
</style> 
</head> 
<body> 
<div class="scroll_box" id="container"> 
	<ul class="list" id="content"> 
		<li> 
			<img src="http://img14.360buyimg.com/n4/4587/cd8a8a76-24f4-44d8-876b-12d78cbae588.jpg" /> 
			<div class="info"> 
			兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
			</div> 
			<span class="price">会员价：￥288.00</span> 
		</li> 
		<li> 
			<img src="http://img11.360buyimg.com/n4/309/9230eaef-021c-447d-a64b-51ce698822ef.jpg" /> 
			<div class="info"> 
			兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
			</div> 
			<span class="price">会员价：￥288.00</span> 
		</li> 
		<li> 
			<img src="http://img10.360buyimg.com/n4/8792/7691b514-a0b3-469e-8a2b-37b219ebc490.jpg" /> 
			<div class="info"> 
			兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
			</div> 
			<span class="price">会员价：￥288.00</span> 
		</li> 
		<li> 
			<img src="http://img12.360buyimg.com/n4/285/c675cbb0-3a6f-4703-95fb-e75a7c90b48e.jpg" /> 
			<div class="info"> 
			兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
			</div> 
			<span class="price">会员价：￥288.00</span> 
		</li> 
		<li> 
			<img src="http://img12.360buyimg.com/n4/1957/22aa7c6d-4b70-49b8-a985-678b1d0e3781.jpg" /> 
			<div class="info"> 
			兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
			</div> 
			<span class="price">会员价：￥288.00</span> 
		</li> 
		<li> 
			<img src="http://img10.360buyimg.com/n4/2314/cf09b35a-eb6d-4a4f-a4dd-3301bfafef99.jpg" /> 
			<div class="info"> 
			兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
			</div> 
			<span class="price">会员价：￥288.00</span> 
		</li> 
	</ul> 
</div> 
<script> 
	untils = { 
		getComputedStyle: function(elem,syle){ 
			var computedStyle = document.defaultView && document.defaultView.getComputedStyle && document.defaultView.getComputedStyle(elem,null); 
			if(!computedStyle){ 
				computedStyle = elem.currentStyle 
			} 
			return computedStyle[syle] 
		}, 
		setStyle: function(elem, name,val){ 
			elem.style[name] = val; 
		}, 
		get: function(id){ 
			document.getElementById(id) 
		} 
	} 
	function ScrollSlider(container, content){ 
		var clone = content.cloneNode(true); 
		var initcss= "left:0; top:0"; 
		var contentHeight = content.offsetHeight; 
		var containerHeight = container.clientHeight; 
		clone.id = "content-clone"; 
		container.appendChild(clone); 
		clone.setAttribute("cssText", initcss); 
		content.setAttribute("cssText", initcss); 
		clone.style.marginTop = contentHeight+"px"; 
		this.content = content; 
		this.clone = clone; 
		this.container = container; 
		this.containerHeight = containerHeight; 
		this.contentHeight = contentHeight; 
	} 
	ScrollSlider.prototype = { 
		start: function(delay){ 
			var _this = this; 
			clearInterval(_this.timer); 
			_this.timer = setInterval(function(){ 
			_this.scroll(); 
			},delay); 
		}, 
		scroll: function(){ 
			var marginTop = parseInt(untils.getComputedStyle(this.content, "marginTop")); 
			var offsetTop = this.contentHeight; 
			if(isNaN(marginTop))return; 
			if( -marginTop >= this.contentHeight){ 
				marginTop = this.contentHeight; 
			} 
			if(marginTop > 0){ 
				offsetTop = -offsetTop; 
			} 
			this.move(marginTop, offsetTop); 
		}, 
		move: function(marginTop, offsetTop){ 
			var s = this.containerHeight, s1 = 0, _this = this, m = 0; 
			var timer = setInterval(function(){ 
				var speed = (s-s1)/8; 
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
				s1 += speed; 
				m = marginTop - s1; 
				untils.setStyle(_this.content, "marginTop", m + "px"); 
				untils.setStyle(_this.clone, "marginTop", (m + offsetTop)+"px"); 
				if(s-s1 <= 0){ 
					clearInterval(timer); 
				} 
			},30); 
		} 
	}; 
	var container = document.getElementById("container") 
	var content = document.getElementById("content") 
	var xx = new ScrollSlider(container, content); 
	xx.start(1000*3); 
	/* 
	//s=1/2 * at^2 
	//s (att)/2 
	//0<s<164 
	0,-164,-328,164,0 
	328,164,0,-164,-328,164,0 
	*/ 
</script> 
</body> 
</html>