html轮播

缺乏、安全感 2022-03-24 15:20 198阅读 0赞

CSS实现的轮播

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css简单的轮播</title>
    		<style>
    			div{
    				width: 200px;
    				height: 300px;
    				background-color: antiquewhite;
    			}
    			img{
    				width: 140px;
    				height:200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<center>跑马灯</center>
    			<marquee direction="left" scrollamount="145px" scrolldelay="1000" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()" hspace="30px" vspace="50px">
    				<img src="../0121多媒体/111.jpg" />
    				<img src="../0121多媒体/222.jpg" />
    				<img src="../0121多媒体/333.jpg" />
                     
    			</marquee>
    		</div>
    	</body>
    </html>

js实现的轮播

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>轮播左右来回移动</title>
    		<style>
    			.div0{
    				width: 140px;
    				height: 200px;
    				overflow: hidden;/*超出部分隐藏*/
    			}
    			#img1{
    				width: 600px;
    				height: 200px;
    				background-color: #DCDCDC;
    				display: inherit;/*让标签成为行级元素*/
    				
    			}
    		</style>
    		<script>
    			var times ;
    			var lemet =0;
    			var wait;
    			window.onload = function(){
    				left1();
    			}
    			/**
    			 * 左移的方法
    			 */
    			function left1(){
    				times = setInterval(function(){
    					lemet--;/*控制轮播速度*/
    					document.getElementById("img1").style.marginLeft=lemet+"px";/*获取div数据*/
    					if(lemet<=-280){
    						clearInterval(times);/*清除定时器*/
    						wait = setTimeout(/*setTimeout一次性定时器  */
    							function (){
    								right1();
    							},1000/*停一秒再改变方向  */
    						);
    						
    					}
    				},10);
    			}
    			/**
    			 * 右移的方法
    			 */
    			function right1(){
    				times = setInterval(function(){/*setInterval定时器  */
    					lemet++;
    					document.getElementById("img1").style.marginLeft=lemet+"px";/*获取div数据*/
    					if(lemet>=0){
    						clearInterval(times);/*清除定时器*/
    						wait = setTimeout(/*setTimeout一次性定时器  */
    							function (){
    								left1();
    							},1000
    						);
    					}
    				},10);
    			}
    		</script>
    	</head>
    	<body>
    		<div class="div0">
    			<div id="img1" >
    				<img src="../0121多媒体/111.jpg" />
    				<img src="../0121多媒体/222.jpg" />
    				<img src="../0121多媒体/333.jpg" />
    			</div>
    		</div>
    	</body>
    </html>

js实现的轮播2

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>一直左移（一直右移）</title>
    	<style>
    			.div0{
    				width: 140px;
    				height: 200px;
    				overflow: hidden;/*超出部分隐藏*/
    			}
    			#img1{
    				width: 600px;
    				height: 200px;
    				background-color: #DCDCDC;
    				display: inherit;/*让标签成为行级元素*/
    				
    			}
    		</style>
    		<script>
    			var times ;
    			var lemet =0;
    			var wait;
    			var rightleng = -420;
    			var lengths = 2;
    			window.onload = function(){/*页面加载完成后自动执行的方法*/
    				/*left1();*/
    				right1();
    			}
    			/**
    			 * 左移的方法
    			 */
    			function left1(){
    				times = setInterval(function(){
    					lemet= lemet-lengths;
    					/*lemet--;*/
    					document.getElementById("img1").style.marginLeft=lemet+"px";/*获取div数据*/
    					if(lemet==-140 || lemet==-280 || lemet==-420){/*每张图片的临界值*/
    						if(lemet==-420){
    							lemet = 0;
    						}
    						clearInterval(times);/*清除定时器*/
    						wait = setTimeout(/*setTimeout一次性定时器  */
    							function (){
    								left1();/*达到一定限度时重新调用自己（递归）*/
    							},1000/*停一秒再改变方向  */
    						);
    						
    					}
    				},10);
    			}
    			/**
    			 * 右移的方法
    			 */
    			function right1(){
    				times = setInterval(function(){/*setInterval定时器  */
    					rightleng++;
    					document.getElementById("img1").style.marginLeft=rightleng+"px";/*获取div数据*/
    					if(rightleng==0 || rightleng==-280 || rightleng==-140){
    						if(rightleng==0){
    							rightleng = -420;
    						}
    						clearInterval(times);/*清除定时器*/
    						wait = setTimeout(/*setTimeout一次性定时器  */
    							function (){
    								right1();
    							},10
    						);
    					}
    				},10);
    			}
    		</script>
    	</head>
    	<body>
    		<div class="div0">
    			<div id="img1" >
    				<img src="../0121多媒体/111.jpg" />
    				<img src="../0121多媒体/222.jpg" />
    				<img src="../0121多媒体/333.jpg" />
    				<img src="../0121多媒体/111.jpg" />/*假像*/
    			</div>
    		</div>
    	</body>
    </html>

js轮播3（终极）

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>轮播</title>
    		<style>
    			.div0 {
    				width: 138px;
    				height: 200px;
    				overflow: hidden;
    			}
    			
    			#div1 {
    				width: 600px;
    				height: 200px;
    			}
    			
    			.id {
    				float: left;
    				width: 138px;
    				height: 200px;
    				background-repeat: no-repeat;
    			}
    			
    			#id0 {
    				background-image: url(../0121多媒体/111.jpg);
    			}
    			
    			#id1 {
    				background-image: url(../0121多媒体/222.jpg);
    			}
    			
    			#id2 {
    				background-image: url(../0121多媒体/333.jpg);
    			}
    		</style>
    		<script>
    			var timesOne;/*移动的定时器*/
    			var waitOne;/*等待的定时器*/
    			var leftmove = 0;/*初始化图片的位置*/
    			var rightove = 414;/*初始化图片的位置*/
    			var lenth =10;/*控制移动速度   注意：这个大小要小于等于图片所给的宽度*/
    			var index= 1;/*每张图片的下标*/
    			var imgWidth = 138;/*图片的宽度*/
    			window.onload = function() {
    				leftMoving();
    			}
    
    			function leftMoving() {
    				timesOne = setInterval(function() {
    					leftmove=leftmove-lenth;/*控制移动速度*/
    					document.getElementById("div1").style.marginLeft = leftmove + "px";
    					if (leftmove == (-imgWidth*index+imgWidth%lenth)) {
    						leftmove = -index * imgWidth;
    						index++;
    						document.getElementById("div1").style.marginLeft = leftmove + "px";
    						if (index == 4) {/*最后的一张图片*/
    							leftmove = 0;/*重新初始化图片的位置*/
    							index = 1;/*重新初始化图片的位置*/
    						}
    						clearInterval(timesOne);
    						wait = setTimeout(function() {
    							leftMoving();
    						}, 1000);/*移动一张图片就停一秒*/
    					}
    				}, 10);
    			}
    
    			function rightMoving() {
    
    			}
    		</script>
    	</head>
    
    	<body>
    		<div class="div0">
    			<div id="div1">
    				<div id="id0" class="id"></div>
    				<div id="id1" class="id"></div>
    				<div id="id2" class="id"></div>
    				<div id="id0" class="id"></div>
    			</div>
    		</div>
    	</body>
    
    </html>

js中内存存储的基本原则：  
基本数据类型：变量名与值都保存在栈内存中。  
对象数据类型：变量名保存在栈内存中，值保存在堆内存中，栈内存中保存堆内存地址。

![js中内存存储][js]  
Js的预编译：  
(1)加载全局执行环境  
(2)加载自定义全局属性  
Js的执行过程  
(1)初始化当前执行环境的作用域  
(2)变量以及对象的赋值  
(3)函数的执行  
垃圾回收

[js]: /images/20220323/3981a5bf161041c5bc1e84bb9cabd35a.png