水平轮播

<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
           
           
        <li><a href="productview.asp?id=99"><img src="./upfile/20171391857953.jpg" border="0" width="200" height="150" alt="地下大峡谷、蝴蝶谷、萤火虫水洞一日游"></a><p style="text-align:center; background:#FFF">地下大峡谷、蝴蝶谷、萤火虫水洞一日游</p></li>
           
        <li><a href="productview.asp?id=98"><img src="./upfile/201713103540910.jpg" border="0" width="200" height="150" alt="沂水地下溶洞+彩虹谷+滑雪一日游"></a><p style="text-align:center; background:#FFF">沂水地下溶洞+彩虹谷+滑雪一日游</p></li>
           
</ul></div>
<div id="demo2">
<ul>
           
        <li><a href="productview.asp?id=100"><img src="./upfile/201712175246474.jpg" border="0" width="200" height="150" alt="泰安大裂谷"></a><p style="text-align:center; background:#FFF">泰安大裂谷</p></li>
           
        <li><a href="productview.asp?id=124"><img src="./upfile/201712155439303.jpg" border="0" width="200" height="150" alt="蒙山一日游"></a><p style="text-align:center; background:#FFF">蒙山一日游</p></li>

</ul></div>
</div>

</div>

<script>
<!--
var speed=100;
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++;
}
}
//向右滚动
function Marquee2(){
 if(tab.scrollLeft<=0)
 tab.scrollLeft+=demo2.offsetWidth
 else{
 tab.scrollLeft--
 }
 }



var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

#demo{ /*width:960px;*/ overflow:hidden; height:225px; }
#demo ul{ overflow: hidden; list-style: none; padding-top:30px}
#demo1 ul li,#demo2 ul li{ float:left; padding:4px 5px 0px 5px;text-align:center; border:2px solid #fff }
#demo1 ul li a span,#demo2 ul li a span{background:#FFF; display:block }
#indemo{ float:left; width:800%}
#demo1{ float:left}
#demo2{ float:left}