HTML图片轮播代码怎么写

html部分

<div id="container">    

<div class="sections">    

<div class="section" id="section0"><h3>this is the page1</h3></div>    

<div class="section" id="section1"><h3>this is the page2</h3></div>    

<div class="section" id="section2"><h3>this is the page3</h3></div>    

<div class="section" id="section3"><h3>this is the page4</h3></div>    

</div>    

</div>

css部分

*{    

padding: 0    

margin: 0    

}    

html,body{    

height: 100%    

}    

#container {    

width: 100%    

height: 500px    

overflow: hidden    

}    

.sections,.section {    

height:100%    

}    

#container,.sections {    

position: relative    

}    

.section {    

background-color: #000    

background-size: cover    

background-position: 50% 50%    

text-align: center    

color: white    

}    

#section0 {    

background-image: url('images/1.jpg')    

}    

#section1 {    

background-image: url('images/2.jpg')    

}    

#section2 {    

background-image: url('images/3.jpg')    

}    

#section3 {    

background-image: url('images/4.jpg')    

}  

.pages li{list-style-type:nonewidth:10pxheight:10pxborder-radius:10pxbackground-color:white}.pages li:hover{box-shadow:0 0 5px 2px white}.pages li.active{background-color:orangebox-shadow:0 0 5px 2px orange}.pages{position:absolutez-index:999}.pages.horizontal{left:50%transform:translateX(-50%)bottom:5px}.pages.horizontal li{display:inline-blockmargin-right:10px}.pages.horizontal li:last-child{margin-right:0}.pages.vertical{right:5pxtop:50%transform:translateY(-50%)}.pages.vertical li{margin-bottom:10px}.pages.vertical li:last-child{margin-bottom:0}

JS部分

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

//引入pageSwitch.min.js

<script>    

$("#container").PageSwitch({    

direction:'horizontal',    

easing:'ease-in',    

duration:1000,    

autoPlay:true,    

loop:'false'    

})    

</script>

如图

<div id="demo">

    <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 style="margin:0 padding:0" >

<tr>

     <td valign=top bgcolor=ffffff id=marquePic1>

    <table width='100%' border='0' cellspacing='0'>

             <tr>

    <td align=center><a href='#'><img src="images/zs001.png" width=300 height=180 border=0><br><br></a></td>

                    <td align=center><a href='#'><img src="images/zs001.png" width=300 height=180 border=0><br><br></a></td>

</tr>

            </table>

</td>

        <td id=marquePic2 valign=top></td>

    </tr>

    </table>

</div>

<script type="text/javascript">

var speed=20

marquePic2.innerHTML=marquePic1.innerHTML

function Marquee(){

if(demo.scrollLeft>=marquePic1.scrollWidth){

demo.scrollLeft=0

}

else

{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

.demo{ width:100% height:auto margin:auto text-align:center}

#demo{width:1180px height:180px overflow:hiddenclear:both margin:auto}

---