使用JS如何实现文字无缝滚动
发布网友
发布时间：2022-04-26 06:49
共2个回答
懂视网
时间：2022-04-07 11:02
首先，我们来看一下效果图：
效果图是这样的，我们需要定义一个div，并放入三张图片，还需要左右两个按钮，以及底下三个按钮三个div。
HTML代码：
<div class="banner" id="banner"> <ul class="clear" > <li style="left:0" ><img src="k1.jpg"></li> <li style="left:100%" ><img src="k-2.jpg"></li> <li style="left:100%"><img src="k-3.jpg"></li> </ul> <div class="pageNav"></div> <div class="leftBtn"></div> <div class="rightBtn"></div> </div>
推荐教程：javascript教程
css代码：
.clear:after{
display:block;
content:"";
clear:both;
}
.banner{
width: 100%;
position:relative;
height: 390px;
}
.banner ul{
width: 100%;
height: 390px;
list-style-type:none;
overflow: hidden;
}
.banner ul li{
width: 100%;
position: absolute;
}
.pageNav{
position: absolute;
left:50%;
bottom:20px;
transform: translateX(-50%);
}
.pageNav a{
display:inline-block;
margin:0 5px;
width: 20px;
height: 20px;
background-color:#fff;
border-radius:50%;
border:2px solid #000;
cursor:pointer;
}
.pageNav a.cur{
background-color:red;
}
.leftBtn, .rightBtn{
position:absolute;
top: 50%;
transform:translateY(-50%);
width: 40px;
height: 50px;
background-color:rgba(0, 0, 0, 0.5);
cursor:pointer;
}
.leftBtn{
left:0;
}
.rightBtn{
right:0;
}
.leftBtn:hover,.rightBtn:hover{
background-color:rgba(0, 0, 0, 0.8);
}js代码：
var banner=document.getElementById("banner");
var ul=banner.getElementsByTagName("ul")[0];
var li=ul.getElementsByTagName("li");
var pageNav=banner.getElementsByClassName("pageNav")[0],leftBtn=document.getElementsByClassName("leftBtn")[0],rightBtn=document.getElementsByClassName("rightBtn")[0],n=0,index=0,timerElem=null,state=false;
for(var i=0;i<li.length;i++){//给图片底下添加按钮
pageA=document.createElement("a");
if(i==0){
pageA.className="cur";
}
pageNav.appendChild(pageA);
}
pageNav.addEventListener('click',pageNavClick,false);
function pageNavClick(e){
if(state){
return;
}
e=e||window.event;//兼容性考虑
for(var i=0;i<li.length;i++){
if(pageNav.children[i]==e.target){
index=n;
var offset=i-n;
n=i;
showBtn(n);
if(offset>0){
showImg(-100);
}else{
showImg(100);
}
}
}
}
function showBtn(index){
for(var z=0;z<li.length;z++){
pageNav.children[z].className="";
}
pageNav.children[index].className="cur";
}
function showImg(offset){
clearInterval(timerElem);
var speed=offset/20;
timerElem=setInterval(function(){
state=true;
if(parseInt(li[n].style.left)==0){
state=false;
clearInterval(timerElem);
li[n].style.left="0";
for(var l=0;l<n;l++){
li[l].style.left="-100%"
}
for(var r=n+1;r<li.length;r++){
li[r].style.left="100%";
}
}else{
li[n].style.left=parseInt(li[n].style.left)+speed+"%";
li[index].style.left=parseInt(li[index].style.left)+speed+"%";
}
},100)
}
leftBtn.onclick=function(){
if(state){
return;
}
index=n;
n--;
if(n<0){
n=li.length-1;
li[n].style.left="-100%";
}
showBtn(n);
showImg(100);
}
rightBtn.onclick=function(){
if(state){
return;
}
index=n;
n++;
if(n>li.length-
1){
n=0;
li[n].style.left="100%";
}
showBtn(n);
showImg(-100);
}
var timer;
timer=setInterval(autoLunbo,3000);
function autoLunbo(){
rightBtn.onclick();
}
banner.onmouseover=function(){
clearInterval(timer);
}
banner.onmouseout=function(){
timer=setInterval(autoLunbo,3000);
}相关视频教程推荐：javascript视频教程
热心网友
时间：2022-04-07 08:10
<!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">
<title>Document</title>
</head>
<style>
.wrap{width:800px;height:500px;margin:200px auto 0;position: relative;border:1px solid #000;overflow: hidden;}
h1{position: absolute;left:800px;word-break: keep-all;}
</style>
<body>
<div class="wrap">
<h1>这是无缝滚动</h1>
<h1>这是无缝滚动</h1>
</div>
<script>
var wenzi=document.querySelectorAll("h1");
var speed1=0;
var speed2=0;
var flag=false;
setInterval(function(){
speed1-=10;
wenzi[0].style.left=800+speed1+"px";
wenzi[1].style.left=800+speed2+"px";
if(wenzi[0].offsetLeft==0){
flag=true;
}
if(flag){
speed2-=10;
}
if(wenzi[0].offsetLeft==0){
speed2=0;
}
if(wenzi[1].offsetLeft==0){
speed1=0;
}
},60)
</script>
</body>
</html>
纯手敲 觉得有用可以点个赞啊
