Home > front end >  Under the great god, please help modify the js code is very short
Under the great god, please help modify the js code is very short

Time：11-13





<meta HTTP - equiv="content-type" Content="text/HTML. Charset=utf-8 "/& gt;

<style>
Li {
height: 20px;
}

# box1 {
Width: 200 px;
height: 100px;
overflow: hidden;
}
</style>



<body>

  • 1111111 & lt;/li>
  • 2222222 & lt;/li>
  • 3333333 & lt;/li>
  • 4444444 & lt;/li>
  • 5555555 & lt;/li>
  • 6666666 & lt;/li>
  • 7777777 & lt;/li>
  • 8888888 & lt;/li>
  • 9999999 & lt;/li>



<script>
Var box1=document. QuerySelector (" # box1 ");


SetInterval (function () {
Box1. ScrollTop++;
If (box1 scrollTop & gt;=(box1. ScrollHeight - box1. OffsetHeight)) {
Box1. ScrollTop=0;
}
}, 20)
</script>




A rolling code from 1 roll 9, to 9 from 1 to start rolling again, how to change to continuous smooth scrolling, instead of jumping back 1 rolling again, I know the new copy another ul spelled, please don't have that kind of ways to do

CodePudding user response:

If you have, @ me

CodePudding user response:

Can take a look at this: https://guoqiankun.blog.csdn.net/article/details/100537430

CodePudding user response:

This is very simple, after rolling were moved to the back, the main code: 
 & lt; ! DOCTYPE html> 
 
 
<meta charset="utf-8"/& gt; 
 A rolling simulation & lt;/title> <br/><style> <br/>Li {<br/>/* height: 20 px; */<br/>The font - size: 40 px; <br/>} <br/><br/># box1 {<br/>width: 500px; <br/>height: 100px; <br/>overflow: hidden; <br/>background-color:green; <br/>} <br/></style> <br/></head> <br/><body> <br/><Div id="box1" & gt; <br/><Ul> <br/><Li> 1111111 & lt;/li> <br/><Li> 2222222 & lt;/li> <br/><Li> 3333333 & lt;/li> <br/><Li> 4444444 & lt;/li> <br/><Li> 5555555 & lt;/li> <br/><Li> 6666666 & lt;/li> <br/><Li> 7777777 & lt;/li> <br/><Li> 8888888 & lt;/li> <br/><Li> 9999999 & lt; Br/& gt; This is 2nd row. & lt;/li> <br/></ul> <br/></div> <br/></body> <br/></html> <br/><script crossorigin="anonymous" integrity="sha384 KcyRSlC9FQog/lJsT + QA8AUIFBgnwKM7bxm7/YaX + NTr4D00npYawrX0h + oXI3a2" SRC="https://lib.baomitu.com/jquery/1.12.4/jquery.js" & gt; </script> <br/><script> <br/>Var box1=document. QuerySelector (" # box1 "); <br/>$(function () {<br/>ScrollItem (); <br/>}); <br/>The function ScrollItem () {<br/>Var scrollValue=https://bbs.csdn.net/topics/$(' # box1 & gt; Ul> Li: first '). OuterHeight (); <br/>Var timer=setInterval (function () {<br/>Box1. ScrollTop++; <br/>If (box1 scrollTop & gt;={scrollValue) <br/>ClearInterval (timer); <br/>$(' # box1 & gt; Ul> Li: first '). InsertAfter (' # box1 & gt; Ul> Li: last '); <br/>Box1. ScrollTop=0; <br/>ScrollItem (); <br/>} <br/>}, 20); <br/>} <br/></script> </pre> <br/><img SRC="https://img.codepudding.com/202011/162854130556201.gif" Alt=""/><p class="article - content rp"> CodePudding user response: </p>There are native writing<p class="article - content rp"> CodePudding user response: </p>Another scroll, cover type: <br/><img SRC="https://img.codepudding.com/202011/162854130556202.gif" Alt=""/> <br/>Rolling code: <br/><pre> <br/>The function ScrollItem () {<br/>$(' # box1 & gt; Ul> Li: first '). SlideUp (1000, function () {<br/>$(this). InsertAfter (' # box1 & gt; Ul> Li: last '). SlideDown (); <br/>SetTimeout (ScrollItem, 1000); <br/>}); <br/>} <br/></pre><p class="article - content rp"> CodePudding user response: </p>This is similar to the round figure, you can find the answer in swiper, how are you going to scroll is ok<p class="article - content rp"> CodePudding user response: </p>There are native writing<p class="article - content rp"> CodePudding user response: </p>: "scroll up" finished <img SRC="https://img.codepudding.com/202011/162854130556203.gif" Alt=""/><p class="article - content rp"> CodePudding user response: </p>Why you don't have native writing! <img SRC="https://img.codepudding.com/202011/162854130556204.gif" Alt=""/><p class="article - content rp"> CodePudding user response: </p>Have, is not rolling element, just dynamic changes the value of the element effect on should also can achieve           </div>
          <div class="th_page th_page_color"></div>
          <div class="umCopyright">
            <p>Page link：<a href="/frontend/81053.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/81053.html</a></p>
          </div>
          <div class="detail-arr">
               <div class="detail-arr-left">Prev:<a href='/frontend/81052.html'>Find a the most flattering blog's front page</a></div>
               <div class="detail-arr-right">Next:<a href='/frontend/81054.html'>2. Use the prop will vue array data [' HTML ', 'CSS', 'JavaScript'] to</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container th_top">
    <div class="row">
      <div class="col-md-12">
        <div class="hot-tags neitags">
          <ul>
            <li><i class="iconfont icon-x-tags"></i> Tags：  </li>
<a href='/e/tags/?tagname=JavaScript' target='_blank'>JavaScript</a>               </ul>
        </div>
      </div>
    </div>
  </div>
 <div class="container th_top">
    <div class="row">
      <div class="col-md-12">
        <div class="xiangguan">
        	<ul class="msg msghead">
            	<li class="tbname">Related</li>
            </ul>
          <ul>             </ul>
        </div>
      </div>
    </div>
  </div>
<div class="container th_top">
  <div class="row">
    <div class="col-md-12">
      <div class="flinks">
        <ul>
          <li><i class="iconfont icon-x-tags"></i> Links：  </li>
          <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li>

            </ul>
      </div>
    </div>
  </div>
</div>
<div class="footer">
  <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span>          <a href="https://www.codepudding.com/contact.html">Contact Us</a>      <a href="https://www.codepudding.com/service.html">Terms of Service</a>      <a href="https://www.codepudding.com/privacy.html">
Privacy Policy</a></p>
  <p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p>
</div>
<script type="text/javascript" src="/skin/code/tianhu.js"></script> 
</body></html>