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


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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP 高手之路(一)
2006/10/09 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
PHP数组相关函数汇总
2015/03/24 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
jquery 插件开发备注
2010/08/27 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python if not in 多条件判断代码
2016/09/21 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
高一数学教学反思
2014/02/07 职场文书
运动会入场词50字
2014/02/20 职场文书
《乞巧》教学反思
2014/02/27 职场文书
财务会计专业自荐书
2014/06/30 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
公司搬迁通知
2015/04/20 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android