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


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 相关文章推荐
js 手机号码合法性验证代码集合
Sep 29 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
PDO::errorInfo讲解
2019/01/28 PHP
js验证表单第二部分
2006/11/25 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
原生JS实现留言板
2020/03/26 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
python中nan与inf转为特定数字方法示例
2017/05/11 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
教师自我评价范文
2013/12/16 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
六年级小学生评语
2014/12/26 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL