jQ广告横向滚动

以你之姓@ 2022-11-13 04:20 148阅读 0赞

*{ 
    		box-sizing: border-box;
    	}
    .gunDong{ 
    		background-color: #F4F4F4;
    		height:30px;
    		border-radius:5px;
    		color: #F85E6E;
    		font-size: 16px;
    		line-height: 30px;
    		box-sizing: border-box;
    		/* padding: 0px 5px; */
    		margin: 20px 0;
    	}
    	.gunDong ul{ 
    		height: 30px;
    		padding: 0 !important;
    	}
    	.gunDong li{ 
    		float: left;
    		list-style: none;
    		display: flex;
    		/* justify-content: flex-end; */
    		/* min-width: 100%; */
    	}
    
    			<div class="col-md-12 col-xs-12 col-sm-12 column">
    				<div class="pix-content gunDong gunDong1" style="overflow: hidden;">
    					<ul>
    						<?php foreach ($notice as $key => $value): ?>
    							<li><a style="color:#f85e6e;" href="#">{ $value['content']}</a></li>
    						<?php endforeach ?>
    					</ul>
    				</div>
    			</div>
    	$(function(){ 
    		
    		let itemWidth=$(".gunDong1").width();
    		$(".gunDong1 li").css({ "min-width":itemWidth+"px"})
    		$(".gunDong1>ul").css({ width:itemWidth*$(".gunDong1 li").length+"px",display:"flex"});
    		console.log(itemWidth)
    		
    		
    		let marginLeft=itemWidth;
    		$(".gunDong1 ul").css({ "margin-left":marginLeft+"px"})
    		console.log(marginLeft)
    		setInterval(()=>{ 
    			$(".gunDong1>ul").animate({ 
    				"margin-left":(marginLeft-=itemWidth/800)+"px"
    			},2.5,function(){ 
    				// console.log(1);
    				if(marginLeft<=-$(".gunDong1 ul").width()){ 
    					marginLeft=itemWidth
    					$(".gunDong1 ul").animate({ "margin-left":itemWidth+"px"},5)
    				}
    			})
    		},2.5)
    	})