html文字横向纵向轮播

最新推荐文章于 2024-05-13 01:06:39 发布

qq_42699996

最新推荐文章于 2024-05-13 01:06:39 发布

阅读量1.6k

点赞数

分类专栏： js 前端文章标签： css html js

本文链接：https://blog.csdn.net/qq_42699996/article/details/104189802

版权

前端同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <title>无缝轮播</title>
</head>
<style>
	*{
	    margin: 0;
	    padding: 0;
	}
	
	.text-banner{
	    width: 100%;
	    height: 30px;
	    overflow: hidden;
	    outline: 1px solid #ddd;
	}
	.text-banner2{
	    width: 100%;
	    overflow: hidden;
	    outline: 1px solid #ddd;
	}
	
	.text-banner-ul-1,.text-banner-ul-2{
	    list-style: none;
	    width: 100%;
	    position: relative;
	    top: 0;
	}
	
	.text-banner-ul-1 li,.text-banner-ul-2 li{
	    height: 30px;
	    line-height: 30px;
	}
	
	.text-banner-hx{
	    white-space: nowrap;
	}
	.text-banner-hx div{
	    display: inline-block;
	    left: 0;
	    position: relative;
	}
	
	/* 上传文件 */
	.file-box{
	    margin: 20px;
	}
	
	.file-box .upload-btn{
	    width: 100px;
	    height: 35px;
	    line-height: 35px;
	    font-size: 14px;
	    color: #fff;
	    border-radius: 4px;
	    transition: all .3s;
	    background: #409eff;
	    text-align: center;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	
	.file-box .upload-btn .file{
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    opacity: 0;
	    cursor: pointer;
	}
	
	.file-box .upload-btn:hover{
	    background: #66b1ff;
	}
</style>
<body>
   <div class="text-banner">
       <ul class="text-banner-ul-1">
           <li>文字轮播1</li>
           <li>文字轮播2</li>
           <li>文字轮播3</li>
           <li>文字轮播4</li>
           <li>文字轮播5</li>
       </ul>
       <ul class="text-banner-ul-2">
            <li>文字轮播1</li>
            <li>文字轮播2</li>
            <li>文字轮播3</li>
            <li>文字轮播4</li>
            <li>文字轮播5</li>
        </ul>
   </div>

    <div class="text-banner2">
        <div class="text-banner-hx">
            <div class="text-banner-hx-1"><span style="padding: 8px 0; display: inline-block;">文字轮播1文字轮播1文字轮播1文字轮播1</span></div><div class="text-banner-hx-2"><span style="padding: 8px 0; display: inline-block;">文字轮播1文字轮播1文字轮播1文字轮播1</span></div>
        </div>
    </div>

   <div class="file-box">
       <div class="upload-btn">
            点击上传
            <input type="file" name="file" id="file" class="file" /> 
       </div>
   </div>

   <script>
       function timer(){
		    let li = document.getElementsByClassName("text-banner-ul-1");
		    let li2 = document.getElementsByClassName("text-banner-ul-2");
		    let length = li[0].children.length;                 
		    let offsetHeight = li[0].children[0].offsetHeight;  
		    let num = offsetHeight * length;                   
		    let a = 5;                                       
		    li[0].style.cssText = 'transition:all linear '+a+'s; top:-'+num+'px';
		    li2[0].style.cssText = 'transition:all linear '+a*2+'s; top:-'+num*2+'px';  
		    setTimeout(() => {
		        li[0].style.cssText = 'top:0px';
		        li2[0].style.cssText = 'top:0px';
		        timer();
		    }, 5000); 
		}
		
		function timer2(){
		    let windowWidth = window.innerWidth;
		    let div1 = document.getElementsByClassName("text-banner-hx-1");
		    let div2 = document.getElementsByClassName("text-banner-hx-2");
		    let offsetWidth = div1[0].offsetWidth; 
		    let a = 5; 
		    if(offsetWidth<=windowWidth){
		        div1[0].style.cssText = 'width:100%;'
		        div2[0].style.cssText = 'width:100%;'
		        let offsetWidth2 = div1[0].offsetWidth;                        
		        div1[0].style.cssText = 'width:100%; transition:all linear '+a+'s; left:-'+offsetWidth2+'px';
		        div2[0].style.cssText = 'width:100%; transition:all linear '+a*2+'s; left:-'+offsetWidth2*2+'px';
		        setTimeout(() => {
		            div1[0].style.cssText = 'left:0px';
		            div2[0].style.cssText = 'left:0px';
		            timer2();
		        }, 5000);   
		    }else{
		        offsetWidth = div1[0].offsetWidth+40; 
		        div1[0].style.cssText = 'margin-right:40px; transition:all linear '+a+'s; left:-'+offsetWidth+'px';
		        div2[0].style.cssText = 'margin-right:40px; transition:all linear '+a*2+'s; left:-'+offsetWidth*2+'px';
		        setTimeout(() => {
		            div1[0].style.cssText = 'left:0px';
		            div2[0].style.cssText = 'left:0px';
		            timer2();
		        }, 5000);
		    }    
		}
		
       timer();
       timer2();
   </script>
</body>
</html>

qq_42699996

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html文字横向纵向轮播

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫