如何制作幻灯片（代码分享）

一 轮播 定时<style type="text/css">  #dw_JS_huanDeng_2 {    margin: 0 auto;    width: 1100px;    position: relative;    z-index: 5;}  #JS_HDmenu_2 {    position: absolute;    top: 300px;    z-index: 4;  }  ol, ul {    list-style: none;  }  #JS_HDmenu_2 li {    float: left;    width: 12px;    height: 12px;    margin: 0 5px;    border-radius: 6px;    cursor: pointer;    background-color: #A79B9B;  }  #JS_HDmenu_2 li:hover {    background-color: red;  }  #JS_huanDeng_2 {    margin: 0px auto 0 auto;    position: relative;    height: 320px;    overflow: hidden;}  #JS_huanDeng_2 div, #JS_huanDeng_2 a {    display: block;    width: 100%;    height: 100%;  }  #JS_huanDeng_2 div {    position: absolute;    z-index: 4;  }</style><script src="__PUBLIC__/H/js/jquery.min.js"></script><!-- //幻灯片-->  <div class="JS_huanDeng_2_bg" >    <div id="dw_JS_huanDeng_2" >      <ul id="JS_HDmenu_2" >      </ul>    </div>    <div id="JS_huanDeng_2" style="border:0px solid red;">      <volist name="banner" id="va">        <div> <a href="{$va.content}" style="background:url(__ROOT__/{$va.content}) center top no-repeat #fff;"></a></div>      </volist>    </div>  </div><!--首页幻灯片轮播 【2016-5-27 】 start--><script type="text/javascript">  for(var i=0;i<$("#JS_huanDeng_2 div").length;i++){    $('#JS_HDmenu_2').append("<li></li>");  }  //alert($('#JS_HDmenu_2').width());  var ml=(1100-$('#JS_HDmenu_2').width())/2;  //alert(ml);  $('#JS_HDmenu_2').css('left',ml+'px');  $('#JS_huanDeng_2 div').eq(0).show().siblings().hide();  var i=0;  var timeId = setInterval("autoChange()",3000);  $('#JS_HDmenu_2 li').mouseover( function(){    clearInterval(timeId);    var I=$(this).index();    $('#JS_huanDeng_2 div').eq(I).fadeIn().siblings().fadeOut();  })  $('#JS_HDmenu_2 li').mouseout(function(){    timeId = setInterval("autoChange()",3000);  });  function autoChange(){    i++;    if(i>$('#JS_huanDeng_2 div').length){      i=0;    }    $('#JS_huanDeng_2 div').eq(i).fadeIn().siblings().fadeOut();  }</script><!--首页幻灯片轮播 【2016-5-27 】 end-->