js图片向左滚动效果

Posted 2023-04-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js图片向左滚动效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body,div margin:0; padding:0;
body padding:1em 0;
img border:0; font-size:0; line-height:0;

#demoLeft margin:0 auto;overflow:hidden;width:950px;height:134px;background:#fff;
#demoLeft .indemo float:left;width:500%;
#demo1,#demo2 float: left;
#demo1 a,#demo2 a display:block;float:left;margin-left:10px;
#demo1 img,#demo2 imgwidth:178px;height:134px;
</style>

<title>无缝图片滚动-02</title>
</head>
<body>

<div id="demoLeft">
<div class="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script type="text/javascript">

var speed=1;

var tabLeft=document.getElementById("demoLeft");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;

function Marquee1()
if(tabLeft.scrollLeft>=tab2.offsetWidth)
tabLeft.scrollLeft-=tab1.offsetWidth;
else
tabLeft.scrollLeft++;

var MyMar=setInterval(Marquee1,speed);
tabLeft.onmouseover=function() clearInterval(MyMar);
tabLeft.onmouseout=function() MyMar=setInterval(Marquee1,speed);
</script>

</body>
</html>

这是我在网上找的代码，图片少的时候(10张左右)还可以，但是图片多了就有问题，或者滚动到最后不滚了，或者demo1与demo2交替的时候太明显，不顺畅，求高手

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marquee 替代 -- 无间滚动</title>
<style type="text/css">

</style>
<style type="text/css">

</style>
<script language="javascript" type="text/javascript">
//
</script>
<script language="javascript" type="text/javascript">
//
</script>
</head>
<body>
<div class="case">
<div class="title"><a href="#" class="r">Top</a>Marquee 调用方法</div>
<div class="b">new Marquee(obj, name, mode, speed, autoStart, movePause);</div>
<ul class="info gray">
<li><span class="key">obj：</span><span class="type">Object</span>滚动对象 (*必须)</li>
<li><span class="key">name：</span><span class="type">String</span>实例名 (*可选，默认随机)</li>
<li><span class="key">mode：</span><span class="type">String</span>滚动模式(x=水平, y=垂直) (*可选,默认为x)</li>
<li><span class="key">speed：</span><span class="type">Number</span>滚动速度，越小速度越快 (*可选，默认10)</li>
<li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始 (*可选，默认True)</li>
<li><span class="key">movePause：</span><span class="type">Boolean</span>鼠标经过是否暂停 (*可选，默认True)</li>
</ul>
</div>
<div class="case">
<div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div>
<div id="MyMarqueeX">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/uploadfile/200812/2/6D202116643.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/F1202116566.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/B9202116170.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/85202116414.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/47202117594.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/E8202117744.jpg" alt="魅力泉州" /></td>
</tr>
</table>
</div>
</div>
<div class="case">
<div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div>
<div id="MyMarqueeY">
<img src="/uploadfile/200812/2/6D202116643.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/F1202116566.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/B9202116170.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/85202116414.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/47202117594.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/E8202117744.jpg" alt="魅力泉州" /><br />
</div>
</div>
<script language="javascript" type="text/javascript">
//
</script>
</body>
</html>
各种滚动都有追问

您好，我选的横向滚动的，遨游下不滚动，IE下速度很慢，我已经把speed设置成1了，IE下还是很慢，只有FF下还不错，还有什么好的方法吗？

参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body,div margin:0; padding:0;
body padding:1em 0;
img border:0; font-size:0; line-height:0;

#demoLeft margin:0 auto;overflow:hidden;width:950px;height:134px;background:#fff;
#demo1,#demo2 float: left;
#demo1 a,#demo2 a display:block;float:left;margin-left:10px;
#demo1 img,#demo2 imgwidth:178px;height:134px;
</style>

<title>无缝图片滚动-02</title>
</head>
<body>

<div id="demoLeft">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>1
</div>
<div id="demo2"></div>
</div>
</div>

<script type="text/javascript">

var speed=10;
var indemo=document.getElementById("indemo");
var tabLeft=document.getElementById("demoLeft");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
ch_div();

tab2.innerHTML=tab1.innerHTML;
//alert(" 2 tab2.scrollWidth="+tab2.scrollWidth);
function Marquee1()
if(tabLeft.scrollLeft>=tab1.scrollWidth)
tabLeft.scrollLeft=0;
else
tabLeft.scrollLeft+=2;

//alert(tabLeft.scrollLeft+" tab1.scrollWidth="+tab1.scrollWidth);

var MyMar=setInterval(Marquee1,speed);
tabLeft.onmouseover=function() clearInterval(MyMar);
tabLeft.onmouseout=function() MyMar=setInterval(Marquee1,speed);

function ch_div()

var w1=tab1.scrollWidth;
var w2=tabLeft.style.Width;
if(w1<w2)

tab1.innerHTML+=tab1.innerHTML;

tab1.style.width=tab1.scrollWidth+"px";
tab2.style.width=tab1.scrollWidth+"px";
indemo.style.width=2*(tab1.scrollWidth)+"px";

</script>

</body>
</html>本回答被提问者采纳

JS实现图片滚动效果

　　源码参考菜鸟教程：<iframe width="100%" height="300" src="https://c.runoob.com/iframe/2037" allowfullscreen="allowfullscreen" frameborder="0"></iframe>　　

　　要实现图片自动滚动需要稍微修改一下源码（我怕忘记自己当时怎么修改的，因此记录一下）：　　

　　示例代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3   <head>
 4       <meta charset="utf-8"> 
 5       <link rel="stylesheet" type = "text/css" href = "testGD.css" >
 6       <script src = "testGD.js"></script>
 7       <title>JS滚动效果</title>
 8   </head>
 9   
10 <body>
11  
12  <div class="slideshow-container">
13  
14   <div class="mySlides fade">
15     <div class="numbertext">1 / 3</div>
16     <img src="1.jpg" style="width:100%">
17     <div class="text"></div>
18   </div>
19 
20   <div class="mySlides fade">
21     <div class="numbertext">2 / 3</div>
22     <img src="2.jpg" style="width:100%">
23     <div class="text"></div>
24   </div>
25 
26   <div class="mySlides fade">
27     <div class="numbertext">3 / 3</div>
28     <img src="3.jpg" style="width:100%">
29     <div class="text"></div>
30   </div>
31   
32 </div>
33 <br>
34 
35 <div style="text-align:center">
36   <!-- 这里有3张图片设置3个onclick来调用showSlides()函数 -->
37   <span class="dot" onclick="showSlides()"></span> 
38   <span class="dot" onclick="showSlides()"></span> 
39   <span class="dot" onclick="showSlides()"></span> 
40 </div>
41 
42 </body>
43 </html>

　　css部分的代码：

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* 幻灯片容器 */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* 下一张 & 上一张 按钮 */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* 定位 "下一张" 按钮靠右 */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* 光标悬停于上一页、下一页控件时的rgba（颜色参数）
上面html代码中没有这两个控件,我会在这篇文章最后补充上去 */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* 标题文本 */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* 数字文本 (1/3 等) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* 标记符号 */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* 淡出动画 */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

　　JavaScript部分的代码：

var slideIndex = 0;
showSlides();
 
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 3500); // 间隔3.5秒后修改图片
}

　　补充滚动图片中上一页、下一页两个控件的代码：

<!DOCTYPE HTML>
<html>
  <head>
      <meta charset="utf-8"> 
      <link rel="stylesheet" type = "text/css" href = "testGD.css" >
      <script src = "testGD.js"></script>
      <title>JS滚动效果</title>
  </head>
  
<body>
 
 <div class="slideshow-container">
 
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="1.jpg" style="width:100%">
    <div class="text"></div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="2.jpg" style="width:100%">
    <div class="text"></div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="3.jpg" style="width:100%">
    <div class="text"></div>
  </div>
  
  <!-- 补充:这里的pulsSlides()函数没有在JS代码中
    没有的话点击翻页控件是没有用的,我再补充一个plusSildes()的JS代码 -->
  <a class="prev" onclick="plusSlides(-1)">?</a>
  <a class="next" onclick="plusSlides(1)">?</a>
</div>
<br>

<div style="text-align:center">
  <!-- 设置X个onclick来调用showSlides()函数 -->
  <span class="dot" onclick="showSlides()"></span> 
  <span class="dot" onclick="showSlides()"></span> 
  <span class="dot" onclick="showSlides()"></span> 
</div>

</body>
</html>

　　补充JavaScript代码：

var slideIndex = 1;
ShowSlides(slideIndex);
 
function plusSlides(n) {
  ShowSlides(slideIndex += n);
}
 
function currentSlide(n) {
  ShowSlides(slideIndex = n);
}
 
function ShowSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}

//为了方便就只把函数名 showslides 区分首字母大小写来用了 如有理解上的不便还请谅解
var slideIndex = 0;
showSlides();
 
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 3500); // 间隔两秒后修改图片
}

　　运行效果（测试浏览器Chrome、Opera、搜狗、）：

技术分享

以上是关于js图片向左滚动效果的主要内容，如果未能解决你的问题，请参考以下文章

焦点轮播图效果实现

请问跑马灯效果如何实现两行文字轮流从右向左跑？一行跑完了，另一行再开始跑，这样循环

JS实现鼠标移上去图片停止滚动移开恢复滚动效果

JS实现图片滚动效果

如何在HTML中实现图片的滚动效果

js如何实现数字滚动效果