手写原创纯js实现轮播图

ゝ一世哀愁。 2023-07-02 04:26 67阅读 0赞

默认设定的图片宽度是1440px,如果有不同的可以自己对应修改即可

<!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>轮播图</title>
    	<style type="text/css">
    		html,body{
    			height:100%;
    			width: 100%;
    			padding:0;
    			margin:0;
    		}
    		ul,ol,li{
    			padding:0;
    			margin:0;
    			list-style: none;
    		}
    		.container{
    			position: relative;
    			width: 1440px;
    			height: 508px;
    			left: 50%;
    			transform: translateX(-50%);
    			-webkit-transform: translateX(-50%);
    			-moz-transform: translateX(-50%);
    			-o-transform: translateX(-50%);
    			-ms-transform: translateX(-50%);
    			top: 20px;
    			overflow: auto;
    		}
    		.container::-webkit-scrollbar {display:none}
    		.banner{
    			position: absolute;
    			z-index: 100;
    			width: 1000px;
    			margin: 0 auto;
    			left: 50%;
    			text-align: center;
    			line-height: 40px;
    			transform: translateX(-50%);
    			-webkit-transform: translateX(-50%);
    			-moz-transform: translateX(-50%);
    			-o-transform: translateX(-50%);
    			-ms-transform: translateX(-50%);
    		}
    		.main{
    			height: 100%;
    			width: 5760px;
    			position: absolute;
    		}
    		#mainScroll{
    			left: 0;
    		}
    		.main li{
    			float: left;
    			padding: 0;
    			margin: 0;
    			width: 1440px;
    		}
    		.main li img{
    			width: 100%;
    		}
    		.prev-button{
    			position: absolute;
    		    width: 30px;
    		    height: 30px;
    		    z-index: 100;
    		    top: 50%;
    		    left: 20px;
    		    transform: translate(0,-50%) rotate(45deg);
    		    border: 3px solid rgba(255,255,255,.5);
    		    border-right: none;
    		    border-top: none;
    		}
    		.prev-button:hover{
    			border: 3px solid rgba(255,255,255,.9);
    			border-right: none;
    		    border-top: none;
    			cursor: pointer;
    		}
    		.next-button{
    			position: absolute;
    		    width: 30px;
    		    height: 30px;
    		    z-index: 100;
    		    top: 50%;
    		    right: 20px;
    		    transform: translate(0,-50%) rotate(45deg);
    		    border: 3px solid rgba(255,255,255,.5);
    		    border-left: none;
    		    border-bottom: none;
    		}
    		.next-button:hover{
    			border: 3px solid rgba(255,255,255,.9);
    			border-left: none;
    		    border-bottom: none;
    			cursor: pointer;
    		}
    
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div class="banner">这里是固定内容</div>
    		<ul class="main" id="mainScroll">
    			<li><img src="./img/commonfile_jpg_00b4a73f2a21b3a6e0bf7f37c6274ac7.jpg"></li>
    			<li><img src="./img/commonfile_jpg_9c8ddad6e1544b66121b2918df07d461.jpg"></li>
    			<li><img src="./img/commonfile_jpg_aa2402bfa2825f4453231d15de26a14c.jpg"></li>
    			<li><img src="./img/focus_pic_youpin.jpg"></li>
    		</ul>
    		<div class="prev-button" id="prev"></div>
    		<div class="next-button" id="next"></div>
    	</div>
    </body>
    <script type="text/javascript">
    	//定义偏移dom
    	var main = document.getElementById('mainScroll');
    	//设定偏移速度单元,50更慢，默认25为0.5秒执行完毕(25*20=500毫秒)
    	var sLength = 25;
    	var sTime = 20;
    	//点击是否执行函数,避免快速重复点击
    	var ifdo = true;
    	main.style.left = '0px';
    	//定义偏移函数
    	function moveTo(startPosition,endPosition){
    		if(ifdo){
    			ifdo = !ifdo;
    			var initial = startPosition;
    			//获取变化量
    			var shift = endPosition - startPosition;
    			//每毫秒偏移的量，设定一秒钟完成移动
    			var singleMove = shift/sLength;
    			var tick = setInterval(function(){
    				if((shift<0&&initial>endPosition)||(shift>0&&initial<endPosition)){
    					if((shift<0&&(initial + singleMove)<endPosition)||(shift>0&&(initial + singleMove)>endPosition)){
    						//精度调整
    						main.style.left = endPosition + 'px';
    						clearInterval(tick);
    						ifdo = !ifdo;
    						console.log('end')
    					}else{
    						main.style.left = initial + singleMove + 'px';
    						initial = initial + singleMove;
    					}
    				}else{
    					clearInterval(tick);
    					ifdo = !ifdo;
    					console.log('end')
    				}
    			},sTime)
    		}
    	}
    
    	
    	// 下一页
    	document.getElementById('next').onclick = function(){
    		var move = parseInt(main.style.left.split('px')[0]);
    		if(-(move - 1440)!=main.children[0].offsetWidth*4){
    			moveTo(move,move-1440)
    		}
    	}
    	//上一页
    	document.getElementById('prev').onclick = function(){
    		var move = parseInt(main.style.left.split('px')[0]);
    		if(move!=0){
    			moveTo(move,move+1440)
    		}
    	}
    	
    </script>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200126143231745.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200126143319591.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200126143330907.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200126143349591.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzIwMTc=,size_16,color_FFFFFF,t_70