教程集 > 脚本编程 > javascript > 正文可控图片左右滚动代码

可控图片左右滚动代码

发布时间：2023-06-07 编辑：jiaochengji.com

教程集为您提供可控图片左右滚动代码等资源，欢迎您收藏本站，我们将为您提供最新的可控图片左右滚动代码资源

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title> ldh_web_editor </title>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <link href="mfx.css" rel="stylesheet" type="text/css">  <script src="mfx.js"></script>  <style>  #box{  	border:1px solid #9599A5;  	background:#C4C7D3;  	width:628px;   	height:150px;  }  #imgPanel{  	height:100px;	  	position:relative;   	overflow:hidden;   	z-index:1;  }  #ctrlPanel{  	border:1px solid #aaa;  	background:#fff;   	height:30px;   	margin:5px;  	padding:5px;  	position:relative;   	z-index:0;  }  img{  	position:absolute;   	padding:5px;  	background:#fff;   	border:1px solid #999;   	bottom:0px;  	left:-999px;  	width:200px;  }  #bg{  	position:absolute;  	width:170px;  	height:90px;  	border:1px solid #aaa;  	border-bottom:none;  	background:#fff;  	top:-91px;  	left:223px;  }  #ctrlPanel button{  	width:45px;  	line-height:20px;  }  #next{  	position:absolute;   	top:5px;  	right:5px;  }  #adTilte{  	position:absolute;   	top:8px;  	left:100px;  	color:#CC0000;   	font-size:20px;  	font-family:黑体;  }  </style>  </head>  <body>  <div id="box">  <div id="imgPanel">  <img alt="可控图片左右滚动代码"  src="http://p1.jquerycn.cn/111cn/a/b/1474575461_6825.jpg" />  <img alt="可控图片左右滚动代码"  src="http://p1.jquerycn.cn/111cn/2/9/1474575461_7726.jpg" />  <img alt="可控图片左右滚动代码"  src="http://p1.jquerycn.cn/111cn/7/2/1474575461_8170.jpg" />  <img alt="可控图片左右滚动代码"  src="http://p1.jquerycn.cn/111cn/8/7/1474575461_5077.jpg" />  <img alt="可控图片左右滚动代码"  src="http://p1.jquerycn.cn/111cn/7/9/1474575462_9341.jpg" />  <img alt="可控图片左右滚动代码"  src="http://p1.jquerycn.cn/111cn/4/2/1474575462_8482.jpg" />  <img alt="可控图片左右滚动代码"  src="http://p1.jquerycn.cn/111cn/0/6/1474575462_7362.jpg" />  <img alt="可控图片左右滚动代码"  src="http://p1.jquerycn.cn/111cn/6/1/1474575462_1231.jpg" />  <img alt="可控图片左右滚动代码"  src="http://p1.jquerycn.cn/111cn/b/2/1474575463_6738.jpg" />  </div>  <div id="ctrlPanel">  <div id="bg"></div>  <div id="adTilte"> 怎么样来的风 怎么样吹过 </div>  <button id="prev" onclick="BlueJS.prev();"><</button>  <button id="next" onclick="BlueJS.next();">></button>   </div>  </div>  <script>  var curcve=function (t, b, c, d){  	if ((t /= d) < (1 / 2.75)) {  		return c * (7.5625 * t * t)   b;  	} else if (t < (2 / 2.75)) {  		return c * (7.5625 * (t -= (1.5 / 2.75)) * t   .75)   b;  	} else if (t < (2.5 / 2.75)) {  		return c * (7.5625 * (t -= (2.25 / 2.75)) * t   .9375)   b;  	} else {  		return c * (7.5625 * (t -= (2.625 / 2.75)) * t   .984375)   b;  	}  };  BlueJS={  	fx:(function (){  		var core=function (el,style,to){  			clearInterval(el['fxID_' style]);  			var from=el['offset' style.charAt(0).toUpperCase() style.slice(1)];  			var set=function (x){el.style[style]=x 'px'},time=360/10,  			fx = (function(from, to, timeout, s, a, p) {  				var c = to - from,d = timeout,b = from;  				return function (){return curcve(t,b,c,d)}  			})(from, to, time),  			t=0;  			el['fxID_' style]=setInterval(function(){  				t  <time?set(fx(t)):set(to,clearInterval(el['fxID_' style]));  			},10);  		};  		return function (el,set){for (var Id in set)core(el,Id,set[Id])};  	})(),  	setFx:function (isNext){  		var data=[[10,80],[112,100],[235,148],[405,100],[525,80],[-50,20],[640,20]];  		for (var i=0;i<this.pics.length;  i ) {  			var img=this.pics[i],v=i;  			if(isNext&&i==0||i>4){  				img.style.left='-40px';  				img.style.width='20px';  			};  			if(!isNext){  				if(i==this.pics.length-1){v=5};  				if(i==4){  					img.style.left='645px';  					img.style.width='20px';  				};  			};  			if(i>4)continue;  			this.fx(img,{left:data[v][0],width:data[v][1]});  		};  	},  	prev:function (){  		this.pics.push(this.pics.shift());  		this.setFx();  	},  	next:function (){  		this.pics.unshift(this.pics.pop());  		this.setFx(1);  	},  	init:function (){  		this.box=document.getElementById("box");  		var pics=this.box.getElementsByTagName("IMG");  		this.pics=[];  		for (var i=0;i<pics.length;  i ) this.pics.push(pics[i]);  		this.setFx();  	}  };  window.onload = function (){  	BlueJS.init();  	setInterval(function(){  		BlueJS.prev();  	},2000);  }  </script>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript 图片左右滚动效果代码
 Javascript实现图片上下左右滚动的代码
 基于jQuery的图片左右无缝滚动插件
 jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
 js连续向左图片滚动代码
 jQuery使用数组编写图片无缝向左滚动
 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 Js图片连续左右滚动的实现代码
 html中去掉textarea右侧滚动条和右下角拖拽
 基于jquery实现点击左右按钮图片横向滚动

上一篇：js 控制完美select下拉选框代码

[关闭]

可控图片左右滚动代码

最近更新

浏览排行