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

话不多数，请看代码：

一 轮播 定时

<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-->

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# 幻灯片 # JS实现的多张图片轮流播放幻灯片效果 # js实现3D图片逐张轮播幻灯片特效代码分享 # js带点自动图片轮播幻灯片特效代码分享 # JS实现FLASH幻灯片图片切换效果的方法 # js实现幻灯片播放图片示例代码 # JS实现淘宝幻灯片效果的实现方法 # javascript实现图片切换的幻灯片效果源代码 # js 幻灯片的实现 # 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换) # Angularjs 实现一个幻灯片示例代码 # 首页 # height # border # cursor # radius # left # ul # ol # list # float # li # overflow # div # hidden # red # background # pointer # color # hover # A79B9B

返回目录在线咨询

上一篇：Go语言中类型断言后必须使用断言结果变量而非原始interface{}变量
下一篇：什么是CDN，它如何提升网站服务器com的加载速度？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求