JS特效——圖片水平滾動

本文轉載自查看原文 2016-12-12 13:53 2434 web 前端

具體源碼如下：

<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />            
        <meta name="keywords" content="關鍵字1,關鍵字2" />        
        <meta name="Description" content="描述信息" />
        <title>水平循環滾動</title>
        <!--CSS/JS-->
        <style type="text/css">
            *{margin:0;padding:0;}
            ul,li{list-style:none;display:block;}
            #scrollBox{background: #FFF;margin:40px auto;overflow:hidden;border: 1px dashed #CCC;width: 500px;}
            #scrollBox #con1,#scrollBox #con2{float:left;margin-left:10px;}        
            #innerdiv {float: left;width: 800%;}
            
        </style>
        
        
    </head>
 <body>
        <!--div-->
    <div id="scrollBox">
        <div id="innerdiv">
            <div id="con1">
                <a href="#"><img src="1.jpg" height="120" width="192"></a>
                <a href="#"><img src="2.jpg" height="120" width="192"></a>
                <a href="#"><img src="3.jpg" height="120" width="192"></a>
                <a href="#"><img src="4.jpg" height="120" width="192"></a>
                <a href="#"><img src="5.jpg" height="120" width="192"></a>
                <a href="#"><img src="6.jpg" height="120" width="192"></a>
                <a href="#"><img src="7.jpg" height="120" width="192"></a>
                <a href="#"><img src="8.jpg" height="120" width="192"></a>
                <a href="#"><img src="9.jpg" height="120" width="192"></a>
            </div>
            <div id="con2"></div>
        </div>
    </div>
    <script type="text/javascript">            
                var area =document.getElementById('scrollBox');
                var con1 = document.getElementById('con1');
                var con2 = document.getElementById('con2');
                con2.innerHTML=con1.innerHTML;
                 area.scrollLeft=0;                 
               function scrollUp(){
                if(area.scrollLeft>=con2.offsetWidth){
                    area.scrollLeft=0;
                }else{
                    area.scrollLeft+=5;
                }
                }                
                var time = 50;
                var mytimer=setInterval(scrollUp,time);
                area.onmouseover=function(){
                    clearInterval(mytimer);
                }
                area.onmouseout=function(){
                    mytimer=setInterval(scrollUp,time);
                }
                /*
                var speed=10; //數字越大速度越慢
                var tab=document.getElementById('scrollBox');
                var tab1=document.getElementById('con1');
                var tab2=document.getElementById('con2');
                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>
 </body>
 
</html>

效果預覽：GitHub

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery 視覺特效（水平滾動圖片） Sequence.js 實現帶有視差滾動特效的圖片滑塊一個圖片滾動飛入的css特效 [iOS] UICollectionView實現圖片水平滾動 Js實現文字水平滾動圖片滾動js代碼基於HTML5+CSS3的圖片旋轉、無限滾動、文字跳動特效 Android_ViewPager_實現多個圖片水平滾動使用Recyclerview實現圖片水平自動循環滾動 wow.js中各種特效對應的類名(滾動效果)