zoukankan      html  css  js  c++  java
  • javascript 多图无缝切换

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    </head>
    <style type="text/css">
    	.wrap{
            320px;
            height:50px;
            overflow: hidden;
            margin:0 auto;
            margin-top:50px;
            position: relative;
    	}
    	.wrap ul{
    		position: absolute;
    		overflow: hidden;
    		padding:0px;
    		margin:0;
    	}
    	.wrap ul li{
    		100px;
    		height:50px;
    		float: left;
    		line-height: 50px;
    		text-align:center;
    		background:orange;
    		font-size: 16px;
    		margin-right: 10px;
    		color:#fff;
    		list-style-type: none;
    	}
    </style>
    <body>
        <input type="button" value ="我要切" id="tab">
        <div class="wrap" id="wrap">
        	<ul>
        		<li>1</li>
        		<li>2</li>
        		<li>3</li>
        		<li>4</li>
        	</ul>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="startMove.js"></script>
    <script type="text/javascript">
    	window.onload = function(){
    
            var iNum = 3;
    		var oBtn = document.getElementById('tab');
    		var wrap = document.getElementById('wrap');
    		var oUl = wrap.getElementsByTagName('ul')[0];
     
    		var aLi = oUl.getElementsByTagName('li');
    		var oSize = parseInt(getStyle(aLi[0],'marginRight')) + parseInt(getStyle(aLi[0],'width'));
    	    function getWidth(){
    	    	oUl.style.width = aLi.length * oSize +'px';
    	    }
    	    getWidth();
            
            //移动函数
            alert(startMove)
            function slider(){
                for (i = 0; i< iNum ;i++){
                	var oLi = aLi[i].cloneNode(true);
                	oUl.appendChild(oLi);
                	getWidth();
                }
                startMove(oUl,{left : -iNum * oSize},function(){
                	for( i = 0; i< iNum ; i++){
                		oUl.removeChild(oLi[0]);
                	    oUl.tyle.left = 0 +'px';
                	}
                	
                });
    
            };
            
            //触发
            oBtn.onclick = function(){
            	slider();
            };
            
    	};
    </script>
    

      

  • 相关阅读:
    layui表格数据统计
    浅谈权限控制
    搜索栏实时更新查找内容
    虚拟域名
    关于阿里云服务器安装了Apache开放80端口访问不了网页
    验证码思路
    计算标准差 Exercise07_11
    倒置数组 Exercise07_12
    找出最小元素的下标 Exercise07_10
    找出最小元素 Exercise07_09
  • 原文地址:https://www.cnblogs.com/bestsamcn/p/5064178.html
Copyright © 2011-2022 走看看