如何制作幻灯片

本文主要分享了制作幻灯片的实例代码，具有一定的参考价值，下面一起来看下吧:

一 轮播 定时 
<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-->

 更多关于制作幻灯片代码请关注PHP中文网（www.php.cn）其他文章！