JS实现旋转木马式图片轮播效果


Posted in Javascript onJanuary 18, 2017

本文实例为大家分享了js图片轮播的具体代码,供大家参考,具体内容如下

主要html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="css/css.css">
  <script type="text/javascript" src="js/animate.js"></script>
</head>
<body>
  <div class="w-wrap" id="js_wrap">
    <div class="wrap-slide" id="wrap_slide">
      <ul>
        <li><a href="#"><img src="images/slidepic1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/slidepic2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/slidepic3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/slidepic4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/slidepic5.jpg" alt=""></a></li>
        <!-- <li><a href="#"><img src="images/slidepic6.jpg" alt=""></a></li> -->
      </ul>
      <div class="wrap-slide-arrow" id="wrap_slide_arrow">
        <a href="javascript:;" class="prev"></a>
        <a href="javascript:;" class="next"></a>
      </div>
    </div>
  </div>
  <script>
    function $(id){ return document.getElementById(id);}
    var js_wrap = $("js_wrap"); 
    var wrap_slide = $("wrap_slide"); 
    var wrap_slide_arrow = $("wrap_slide_arrow");
    var lis = wrap_slide.children[0].children;


    var json = [
      {
        //1
        width: 400,
        top: 20,
        left: 50,
        opacity: 20,
        z: 2
      },
      {
        //2
        width: 600,
        top: 70,
        left: 0,
        opacity: 80,
        z: 3
      },
      {
        //3
        width: 800,
        top: 100,
        left: 200,
        opacity: 100,
        z: 4
      },
      {
        //4
        width: 600,
        top: 70,
        left: 600,
        opacity: 80,
        z: 3
      },
      {
        //5
        width: 400,
        top: 20,
        left: 750,
        opacity: 20,
        z: 2
      }/*,
      {
        //6
        width: 300,
        top: 10,
        left: 400,
        opacity: 10,
        z: 1
      }*/
    ]
    change(); //将各个图片按照json铺开层次
    var jieliu = true;
    //两个按钮点击事件
    var as = wrap_slide_arrow.children;
    for(var k in as){
      as[k].onclick = function(){
        if(this.className == "prev"){
          /*alert("左侧按钮");*/
          //所有图片逆时针旋转,相当于图片不动,json的第一个删除并插到最后一个
          if(jieliu == true){
            change(false);
            jieliu = false;
          }

        }else if(this.className == "next"){
          /*alert("右侧按钮");*/
          //所有图片顺时针旋转,相当于图片不动,json的最后一个删除并插到第一个
          if(jieliu == true){
            change(true);
            jieliu = false;
          }
        }
      }
    }
    function change(flag){
      if(flag){
        //所有图片顺时针旋转,相当于图片不动,json的最后一个删除并插到第一个      
        json.unshift(json.pop());
      }else{
        //所有图片逆时针旋转,相当于图片不动,json的第一个删除并插到最后一个
        json.push(json.shift());
      }
      for(var k in json){
        animate(lis[k],{
          width: json[k].width,
          top: json[k].top,
          left: json[k].left,
          opacity: json[k].opacity,
          zIndex: json[k].z
        },function(){ jieliu = true;}); //当动画执行完,执行回调函数,此时置节流为true
      }
    }
    var timer = null;
    timer = setInterval(autoPlay,2000);
    function autoPlay(){
      if(jieliu == true){
        change(true);
        jieliu = false;
      }
    }

    js_wrap.onmouseover = function(){
      clearInterval(timer);
      animate(wrap_slide_arrow,{opacity:100});
    }
    js_wrap.onmouseout = function(){
      clearInterval(timer);
      timer = setInterval(autoPlay,2000);
      animate(wrap_slide_arrow,{opacity:0});
    }

    /*js_wrap.onmouseover = function(){
      animate(wrap_slide_arrow,{opacity:100});
    }
    js_wrap.onmouseout = function(){
      animate(wrap_slide_arrow,{opacity:0});
    }*/
  </script>
</body>
</html>

主要css代码:

/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.w-wrap{
  width: 1200px;
  margin: 100px auto;
}
.wrap-slide{
  position: relative;
}
.wrap-slide li{
  position: absolute;
  left: 200px;
  top: 0;
}
.wrap-slide li img{
  width: 100%;
}
.wrap-slide-arrow{
  opacity: 0;
  position: relative;
}
.prev,.next{
  width: 76px;
  height: 112px;
  position: absolute;
  top: 50%;
  margin-top: -56px;
  background: url(../images/prev.png) no-repeat;
}
.next{
  right: 0;
  background: url(../images/next.png) no-repeat;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
微信小程序实现图片预加载组件
Jan 18 #Javascript
JavaScript原生节点操作小结
Jan 17 #Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 #Javascript
easyUI combobox实现联动效果
Jan 17 #Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 #Javascript
React Router基础使用
Jan 17 #Javascript
JavaScript自定义分页样式
Jan 17 #Javascript
You might like
Yii2中关联查询简单用法示例
2016/08/10 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
python更新列表的方法
2015/07/28 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
六五普法规划实施方案
2014/03/21 职场文书
诉前财产保全担保书
2014/05/20 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
2015年端午节活动总结
2015/02/11 职场文书
七一建党节慰问信
2015/02/14 职场文书