轮播代码

能通过代码控制展示图片轮播来展示内容。

<div style="background-color:pink"> 
             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
             <style type="text/css">
                        <!--
                        #demo { overflow:hidden;
                        background: #FFF;
                        overflow:hidden;
                        border: 18px dashed #FFF;
                        width: 100%;
                        height: 62%;
                        }
                        #demo img {
                        border: 3px solid #F2F2F2;
                        }
                        #indemo {
                        float: left;
                        width: 800%;
                        }
                        #demo1 {
                        float: left;
                        }
                        #demo2 {
                        float: left;
                        }
                        -->
                        </style> 
  <!-- 2019 06 04 300+  -->
             <div id="demo"> 
              <div id="indemo"> 
               <div id="demo1">     
                <a href="https://s.click.taobao.com/9ZmRe5w" target="_blank"><img src="http://cpuck.com/wxm/img/jsdtm.png" title="" width="124" height="50" alt="" /> </a>               
                <a href="https://s.click.taobao.com/hiWRe5w" target="_blank"><img src="./img/hstm.png" title="" width="124" height="50" alt="" /> </a>            
                <a href="https://s.click.taobao.com/sPIRe5w" target="_blank"><img src="./img/lstm.png" title="" width="124" height="50" alt="" /> </a>             
                <a href="https://s.click.taobao.com/GcDRe5w" target="_blank"><img src="./img/djtm.png" title="" width="124" height="50" alt="" /> </a>              
                <a href="https://s.click.taobao.com/mI6Re5w" target="_blank"><img src="./img/deli.png" title="" width="124" height="50" alt="" /> </a>  
                <a href="https://s.click.taobao.com/Fp3Se5w" target="_blank"><img src="./img/gree.png" title="" width="124" height="50" alt="" /> </a>
                       <a href="https://s.click.taobao.com/sPIRe5w" target="_blank"><img src="./img/lstm.png" title="" width="124" height="50" alt="" /> </a>             
                <a href="https://s.click.taobao.com/GcDRe5w" target="_blank"><img src="./img/djtm.png" title="" width="124" height="50" alt="" /> </a> 
               </div>
               <a href="https://www.appnode.com/?fsjsab" target="_blank"> 
                <div id="demo2"> 
                </div> </a>
              </div>
              <a href="https://www.appnode.com/?fsjsab" target="_blank"> </a>
             </div>
             <a href="https://www.appnode.com/?fsjsab" target="_blank"> <script>
                        <!--
                        var speed=50; //数字越大速度越慢
                        var tab=document.getElementById('demo');
                        var tab1=document.getElementById('demo1');
                        var tab2=document.getElementById('demo2');
                        tab2.innerHTML=tab1.innerHTML;
                        function Marquee(){
                        if(tab2.offsetWidth-tab.scrollLeft<=0)
                        tab.scrollLeft-=tab1.offsetWidth
                        else{
                        tab.scrollLeft++;
                        }
                        }
                        var MyMar=setInterval(Marquee,speed);
                        tab.onmouseover=function() {clearInterval(MyMar)};
                        tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
                        -->
                        </script> </a>
            </div>