编程 Javascript

利用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做网页特效_大图轮播(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

枚举JavaScript对象的函数

Dec 22 Javascript

jQuery on()方法绑定动态元素的点击事件实例代码浅析

Jun 16 Javascript

jquery实现简单的瀑布流布局

Dec 11 Javascript

js仿新浪微博消息发布功能

Feb 17 Javascript

JavaScript正则替换HTML标签功能示例

Mar 02 Javascript

jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

May 19 jQuery

使用Vue实现图片上传的三种方式

Jul 17 Javascript

如何用原生js写一个弹窗消息提醒插件

May 24 Javascript

微信小程序 textarea 层级过高问题简单解决方案

Oct 14 Javascript

解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题

Jul 22 Javascript

原生js实现弹幕效果

Nov 29 Javascript

一篇文章了解正则表达式的替换技巧

Feb 24 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安装攻略:常见问题解答（一）

2006/10/09 PHP

PHP初学入门

2006/11/19 PHP

php a simple smtp class

2007/11/26 PHP

php版微信公众平台接口开发之智能回复开发教程

2016/09/22 PHP

PHP实现的mysql操作类【MySQL与MySQLi方式】

2017/10/07 PHP

thinkphp5使用无限极分类

2019/02/18 PHP

asp 的分词实现代码

2007/05/24 Javascript

javascript中的有名函数和无名函数

2007/10/17 Javascript

javascript prototype原型操作笔记

2009/12/07 Javascript

jQuery让控件左右移动的三种实现方法

2013/09/08 Javascript

关于Javascript作用域链的八点总结

2013/12/06 Javascript

使用ajax+jqtransform实现动态加载select

2014/12/01 Javascript

JavaScript基础之流程控制语句的用法

2017/08/31 Javascript

Vue组件开发技巧总结

2018/03/04 Javascript

vue 项目地址去掉 #的方法

2018/10/20 Javascript

vue通过数据过滤实现表格合并

2020/11/30 Javascript

Python检测生僻字的实现方法

2016/10/23 Python

基于python的字节编译详解

2017/09/20 Python

Python实现嵌套列表去重方法示例

2017/12/28 Python

python 实现数组list 添加、修改、删除的方法

2018/04/04 Python

Python3+django2.0+apache2+ubuntu14部署网站上线的方法

2018/07/07 Python

详解Django+Uwsgi+Nginx 实现生产环境部署

2018/11/06 Python

Python读取YUV文件,并显示的方法

2018/12/04 Python

Python查找文件中包含中文的行方法

2018/12/19 Python

Python : turtle色彩控制实例详解

2020/01/19 Python

在脚本中单独使用django的ORM模型详解

2020/04/01 Python

泰坦健身器材：Titan Fitness

2018/02/13 全球购物

商场经理竞聘演讲稿

2014/01/01 职场文书

升旗仪式主持词

2014/03/19 职场文书

离婚财产分隔协议书

2014/10/23 职场文书

公司感谢信范文

2015/01/22 职场文书

银行客户经理岗位职责

2015/04/09 职场文书

小学生勤俭节约倡议书

2015/04/29 职场文书

pandas中关于apply+lambda的应用

2022/02/28 Python

Windows 64位安装 mysql 8.0.28 图文教程

2022/04/19 MySQL

深入理解MySQL中MVCC与BufferPool缓存机制

2022/05/25 MySQL