无缝滚动图片——源码

mxx_1111

浏览: 61521 次
性别:
来自: 济南

最近访客更多访客>>

liu329175905

share7we

xiao5730395

joniwang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

图片已上传，请到我的资源部去下载，不用积分，——无缝滚动图片http://download.csdn.net/detail/qq_34137397/9665933

</head>
<body>
<div class="control">
	<label id="chk_pause"><input type="checkbox" checked="checked">间隔停顿</label>
	<select id="pause_time">
		<option value="100">短</option>
		<option value="1000" selected="selected">中</option>
		<option value="3000">长</option>
	</select>

	滚动速度：
	<select id="sel_speed">
		<option value="2">慢</option>
		<option value="5">中</option>
		<option value="10">快</option>
	</select>
</div>

<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>
    <div class="wrap">
        <ul>
            <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" /></a></li>
            <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" /></a></li>
            <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" /></a></li>
            <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

CSS代码

* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }

.roll { width: 880px; height: 108px; margin: 50px auto 0; position: relative; }
.btn_left { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat -70px -69px; position: absolute; top: 20px; left: 1px; z-index: 1; }
.btn_left:hover { background: url(images/btn.jpg) no-repeat -70px 0; }
.btn_right { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat 1px -69px; position: absolute; top: 20px; right: 0; z-index: 1; }
.btn_right:hover { background: url(images/btn.jpg) no-repeat 1px 0; }
.roll .wrap { width: 728px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; }
.roll ul { position: absolute; top: 0; left: 0; }
.roll li { float: left; width: 182px; height: 108px; text-align: center; }
.roll li a:hover { position: relative; top: 2px; }

.control { border-bottom: 1px solid #ccc; background: #eee; text-align: center; padding: 20px 0; }

js代码

var g_bMoveLeft=true;
var g_oTimer=null;
var g_oTimerOut=null;

var g_bPause=true;
var g_iPauseTime=1000;
var g_iSpeed=2;

window.onload=function ()
{
	var oDiv=document.getElementById('roll');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	var aLi=oUl.getElementsByTagName('li');
	var aA=oDiv.getElementsByTagName('a');
	
	var oChk=document.getElementById('chk_pause');
	var oPauseTime=document.getElementById('pause_time');
	var oSpeed=document.getElementById('sel_speed');
	
	var i=0;
	
	var str=oUl.innerHTML+oUl.innerHTML;
	
	oUl.innerHTML=str;
	
	oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
	
	for(i=0;i<aLi.length;i++)
	{
		aLi[i].onmouseover=function ()
		{
			stopMove();
		};
		
		aLi[i].onmouseout=function ()
		{
			startMove(g_bMoveLeft);
		};
	}
	
	aA[0].onmouseover=function ()
	{
		startMove(true);
	};
	
	aA[1].onmouseover=function ()
	{
		startMove(false);
	};
	
	startMove(true);
	
	oChk.onclick=function ()
	{
		g_bPause=oChk.getElementsByTagName('input')[0].checked;
	};
	
	oSpeed.onchange=function ()
	{
		g_iSpeed=parseInt(this.value);
	};
	
	oPauseTime.onchange=function ()
	{
		g_iPauseTime=parseInt(this.value);
	};
};

function startMove(bLeft)
{
	g_bMoveLeft=bLeft;
	
	if(g_oTimer)
	{
		clearInterval(g_oTimer);
	}
	g_oTimer=setInterval(doMove, 30);
}

function stopMove()
{
	clearInterval(g_oTimer);
	g_oTimer=null;
}

function doMove()
{
	var oDiv=document.getElementById('roll');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	var aLi=oUl.getElementsByTagName('li');
	
	var l=oUl.offsetLeft;
	
	if(g_bMoveLeft)
	{
		l-=g_iSpeed;
		if(l<=-oUl.offsetWidth/2)
		{
			l+=oUl.offsetWidth/2;
		}
	}
	else
	{
		l+=g_iSpeed;
		if(l>=0)
		{
			l-=oUl.offsetWidth/2;
		}
	}
	
	if(g_bPause)
	{
		if(Math.abs(l-Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth)<Math.ceil(g_iSpeed/2))
		{
			stopMove();
			g_oTimerOut=setTimeout
			(
				function ()
				{
					startMove(g_bMoveLeft);
				}, g_iPauseTime
			);
			
			l=Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth;
		}
	}
	
	oUl.style.left=l+'px';
}

分享到：