利用JS做网页特效_大图轮播(实例讲解)


Posted in Javascript onAugust 09, 2017

废话不多说,直接上代码:

<style>
      * {
        margin: 0px;
        padding: 0px;
      }
      
      .stage {
        width: 500px;
        height: 300px;
        border: 5px solid black;
        margin: 200px;
        position: relative;
        overflow: hidden;
      }
      
      .to-left,
      .to-right {
        position: absolute;
        top: 0px;
        width: 50px;
        height: 300px;
        background-color: black;
        color: white;
        font-size: 30px;
        text-align: center;
        line-height: 300px;
        opacity: 0.3;
      }
      
      .to-left {
        left: 0px;
      }
      
      .to-right {
        right: 0px;
      }
      
      .to-left:hover,
      .to-right:hover {
        cursor: pointer;
        opacity: 0.5;
      }
      
      .banner {
        width: 3000px;
        height: 300px;
      }
      
      .items {
        float: left;
        width: 500px;
        height: 300px;
        background-color: blanchedalmond;
        font-size: 100px;
        text-align: center;
        line-height: 300px;
      }
    </style>
  </head>
<!--大图轮播特效-->
  <body>
    <div class="stage">
      <div class="to-left">
        <</div>
          <div class="to-right">></div>
          <div class="banner">
            <div class="items">1</div>
            <div class="items" style="">2</div>
            <div class="items" style="">3</div>
            <div class="items" style="">4</div>
            <div class="items" style="">5</div>
            <div class="items">1</div>
          </div>
      </div>
  </body>

</html>
<script>
  var to_right = document.getElementsByClassName('to-right')[0];
  var to_left = document.getElementsByClassName('to-left')[0];
  var banner = document.getElementsByClassName('banner')[0];
  var arr = [];
  var count = 1;

  to_right.onclick = function() {
    toRight();
  }
  
  function toRight(){
    arr.push(window.setInterval("moveLeft()", 30));
  }
  
  to_left.onclick = function() {
    toLeft();
  }

  function toLeft(){
    arr.push(window.setInterval("moveRight()", 30));
  }
  
  function moveLeft() {
    if(count < 5) {
      if(banner.offsetLeft > count * (-500)) {
        banner.style.marginLeft = banner.offsetLeft - 20 + "px";
      } else {
        for(var x in arr) {
          window.clearInterval(arr[x]);
        }
        count++;
      }
//  连接点
    }else{
      if(banner.offsetLeft > count * (-500)) {
        banner.style.marginLeft = banner.offsetLeft - 20 + "px";
      } else {
        for(var x in arr) {
          window.clearInterval(arr[x]);
        }
        count = 1;
        banner.style.marginLeft = 0 + 'px';
      }
    }
  }
  
  function moveRight() {
    if(count-1 >0) {
      if(banner.offsetLeft < (count-2) * (-500)) {
        banner.style.marginLeft = banner.offsetLeft + 20 + "px";
      } else {
        for(var x in arr) {
          window.clearInterval(arr[x]);
        }
        count--;
      }
    }
  }
  window.setInterval("toRight()",1750);
  

</script>

以上这篇利用JS做网页特效_大图轮播(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
基于Vue实例对象的数据选项
Aug 09 #Javascript
react-native之ART绘图方法详解
Aug 08 #Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 #Javascript
angular+ionic返回上一页并刷新页面
Aug 08 #Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 #Javascript
You might like
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
python代码制作configure文件示例
2014/07/28 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python list运算操作代码实例解析
2020/01/20 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
小学生家长评语集锦
2014/01/30 职场文书
劳动竞赛口号
2014/06/16 职场文书
大学同学会活动方案
2014/08/20 职场文书
个人合伙协议书范本
2014/10/14 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
六一儿童节致辞
2015/07/31 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
Elasticsearch 基本查询和组合查询
2022/04/19 Python
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers