A practical picture switch support click switch and automatic rotation

The code is as follows:

<div class="scroll_div">
<ul class="pic">
<li><img src="img/pic_1.jpg" /></li>
<li><img src="img/pic_2.jpg" /></li>
<li><img src="img/pic_3.jpg" /></li>
<li><img src="img/pic_4.jpg" /></li>
<li><img src="img/pic_5.jpg" /></li>
</ul>
<ul class="btn">
<li> Project a </li>
<li> The second project </li>
<li> Project three </li>
<li> The project of four </li>
<li> Project five </li>
</ul>
</div>

HTML

Here simply change the image path to your local one.

.scroll_div{width:1000px; height:370px; margin:0 auto; padding:10px;}
.scroll_div .pic{width:820px; height:370px; overflow:hidden; position:relative; float:left;}
.scroll_div .pic li{width:820px; height:370px; position:absolute; top:0; left:0; display:none;}
.scroll_div .btn{float:right; width:173px;}
.scroll_div .btn li{width:173px; height:66px; display:block; float:left; text-align:center; color:#fff; font:18px/100% " Microsoft jas black "; font-weight:bold; background:#008dd8; margin-bottom:10px; line-height:66px; cursor:pointer;}
.scroll_div .btn li.on{background:#d73737;}

li {list-style:none;}