您的位置:首页 > Web前端 > JavaScript

实现图片轮流滑动

2015-09-14 17:59 561 查看
            <style type="text/css">

<!--

                #demo {

                background: #FFF;

                overflow:hidden;

                border: 1px dashed #CCC;

                width: 255px;                

                }

                #demo img {

                border: 3px solid #F2F2F2;

                }

                #indemo {

                float: left;

                width: 800%;

                }

                #demo1 {

                float: left;

                }

                #demo2 {

                float: left;

                }

                -->

            </style>             

              <div style="width:255px; margin:0 auto;height:136px " id="demo">

                <div  id="indemo" >

                <div  id="demo1" >

                <img src="http://113.11.194.85:8080/TrafficImage/image?filename=20110808100036462040080231" border="0" width="190px" height="136px" />

                <img src="http://113.11.194.85:8080/TrafficImage/image?filename=20110808100059522010030551" border="0" width="190px" height="136px" />

                <img src="http://113.11.194.85:8080/TrafficImage/image?filename=20110808100058241010060621" border="0" width="190px" height="136px" />

                <img src="http://113.11.194.85:8080/TrafficImage/image?filename=20110808100058362050180331" border="0" width="190px" height="136px" />

                <img src="http://113.11.194.85:8080/TrafficImage/image?filename=20110808100057321010040731" border="0" width="190px" height="136px" />

                

                </div>

                <div id="demo2"></div>

                </div>

                </div>

              <script>

var speed=20;

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jsp