编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

javascript实现图片滚动

发布日期:2014-02-12 20:44:38
  • 收藏本文    我要投稿
  • 闲来无事捣鼓了一个原来的js图片滚动

    首先看看 静态页的结构:

    <body>
    <a href='javascript: le()'>向左</a>
    <a href='javascript: re()'>向右</a>
    <div id='img'>
    <ul id='imgul'>
    <li><img src='img/1.jpg' height='150' width='200'/></li>
    <li><img src='img/2.jpg' height='150' width='200' /></li>
    <li><img src='img/3.jpg' height='150' width='200'/></li>
    <li><img src='img/4.jpg' height='150' width='200'/></li>
    </ul>
    </div>
    </body>

    上面两个a标签 是控制图片滚动的走向

    关键是div  ul  li  <img> 的结构      div里面是ul 人后是li 里面是图片img 标签

    让li 有浮动 然后给 div 加一个左右外边距自动    在给 div 一个相对定位  ul一个绝对定位 

    大体的布局就差不多了

    滚动的大体思路就是,通过css定位和js定时器 改变ul 的left 属性 来实现滚动。

    下面就是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=utf-8' />
    <title>无标题文档</title>
    <style type='text/css'>
    *{
        padding:0px;
        margin:0px;
        }
    
    li{
        height:150px;
        width:200px;
        float:left;
        margin:10px;
        }
    
    ul{
        width:880px;
        height:170px;
        list-style-type: none;
        background-color:#FFF;
        position:absolute;
        left:0;
        top:0;
    
        }
        
    div{
        width:880px;
        height:170px;
        margin-top:100px;
        margin-left:auto;
        margin-right:auto;
        background-color:#FF0000;
        position:relative;
        overflow:hidden;
        }
    
    </style>
    <script>
    var f=-1;//新建一个全局变量
    function le()//点击向左调用的方法
    {
        f=-1;
        }
    function re()//点击向右调用的方法
    {
        f=1;
        }
    window.onload=function (){
        odiv=document.getElementById('div');//获取div
        oul=document.getElementById('ul');//获取ul
        oul.innerHTML=oul.innerHTML+oul.innerHTML; //复制一份ul 里的内容
        oul.style.width=oul.offsetWidth*2+'px';//应为ul 里的内容比原来多了一倍所以宽也要比原来多一倍
        
        
        //实现图片滚动的函数
        function cc (){
            //判断图片滚动的位置  向左时的情况
            if(oul.offsetLeft<-oul.offsetWidth/2)
            {            
                oul.style.left=0+'px';
                }
                
                    //判断图片滚动的位置  向右时的情况
                    if(oul.offsetLeft>0)
            {            
                oul.style.left=-oul.offsetWidth/2+'px';
                }
                   //f为 上面的全局变量  为 正则是向右  为负则是向左
            oul.style.left=oul.offsetLeft+f+'px';
            }
            //定时器
        var time=setInterval(cc,10);
         //鼠标移动到div上时 停止定时器
        odiv.onmouseover=function (){
                clearInterval(time);
                
                };
                //鼠标移出div时 在次运行定时器
        odiv.onmouseout=function (){
                time=setInterval(cc,10);
                
                };
    
        };
    </script>
    </head>
    
    <body>
    <a href='javascript: le()'>向左</a>
    <a href='javascript: re()'>向右</a>
    <div id='div'>
     <ul id='ul'>
       <li><img src='img/1.jpg' height='150'  width='200'/></li>
       <li><img src='img/2.jpg' height='150'  width='200' /></li>
       <li><img src='img/3.jpg' height='150'  width='200'/></li>
       <li><img src='img/4.jpg' height='150'  width='200'/></li>
     </ul>
    </div>
    </body>
    </html>

    大家如果有什么建议可以提出来!!谢谢!!

延伸阅读:

Tag标签:图片滚动  
  • 专题推荐