如何制作幻灯片(代码分享)


Posted in Javascript onJanuary 06, 2017

话不多数,请看代码:

一 轮播 定时

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 #Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 #Javascript
ajax异步请求详解
Jan 06 #Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 #Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 #Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 #Javascript
JS调用Android、Ios原生控件
Jan 06 #Javascript
You might like
PHP 变量的定义方法
2010/01/26 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
javascript 播放器 控制
2007/01/22 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
《北京的春节》教学反思
2014/04/07 职场文书
条幅标语大全
2014/06/20 职场文书
2014年除四害工作总结
2014/12/06 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android