zoukankan      html  css  js  c++  java
  • 无缝滚动图片——源码

    图片已上传,请到我的资源部去下载,不用积分,——无缝滚动图片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 {  880px; height: 108px; margin: 50px auto 0; position: relative; }
    .btn_left { display: block;  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;  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 {  728px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; }
    .roll ul { position: absolute; top: 0; left: 0; }
    .roll li { float: left;  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';
    }


  • 相关阅读:
    HDU 1501 Zipper(DFS)
    HDU 2181 哈密顿绕行世界问题(DFS)
    HDU 1254 推箱子(BFS)
    HDU 1045 Fire Net (DFS)
    HDU 2212 DFS
    HDU 1241Oil Deposits (DFS)
    HDU 1312 Red and Black (DFS)
    HDU 1010 Tempter of the Bone(DFS+奇偶剪枝)
    HDU 1022 Train Problem I(栈)
    HDU 1008 u Calculate e
  • 原文地址:https://www.cnblogs.com/a1111/p/6540402.html
Copyright © 2011-2022 走看看