JavaScript实现大图轮播效果


Posted in Javascript onJanuary 11, 2017

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

<head>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>大图轮播</title>
  <style type="text/css">
   * {
    margin: 0px;
    padding: 0px;
   }
   
   #container {
    width: 500px;
    height: 300px;
    /*border: 1px solid black;*/
    position: relative;
    overflow: hidden;
   }
   
   .btn {
    height: 100%;
    width: 30px;
    /*border: 1px solid red;*/
    position: absolute;
    text-align: center;
    line-height: 300px;
    font-size: 40px;
    font-weight: 900;
    color: black;
    opacity: 0.3;
    transition: 0.6s;
    z-index: 999;
    background-color: white;
   }
   
   .btn:hover {
    cursor: pointer;
    opacity: 0.8;
   }
   
   #left-btn {
    left: 0px;
    top: 0px;
   }
   
   #right-btn {
    right: 0px;
    top: 0px;
   }
   
   #ad-container {
    width: 2500px;
    height: 300px;
    /*border: 1px solid blue;*/
    position: relative;
   }
   
   .ad {
    width: 500px;
    height: 300px;
    float: left;
    text-align: center;
    line-height: 300px;
    font-size: 100px;
    font-family: "微软雅黑";
   }
  </style>
 </head>

 <body>
  <div id="container">
   <div id="left-btn" class="btn">
    <</div>
     <div id="right-btn" class="btn">></div>
     <div id="ad-container">
      <div class="ad" style="background-color: mediumpurple;">1</div>
      <div class="ad" style="background-color: yellowgreen;">2</div>
      <div class="ad" style="background-color: rosybrown;">3</div>
      <div class="ad" style="background-color: salmon;">4</div>
      <div class="ad" style="background-color: cyan;">5</div>
     </div>
   </div>
 </body>

</html>
<script type="text/javascript">
 var rightBtn = document.getElementById("right-btn");
 var leftBtn = document.getElementById("left-btn");
 var n = 1;
/* var count = 1*/;
 var arr = new Array();
/* var m=1;
*/ rightBtn.onclick = function() {
  var x = window.setInterval("to_right()", 20);
  arr.push(x);
 }

 function clear() {
  for(var i in arr) {
   window.clearInterval(arr[i]);
  }
 }

 function to_right() {

  var adContainer = document.getElementById("ad-container");
  if(n == 5) {
   clear();
  } else if(adContainer.offsetLeft != n * (-500)) {
   adContainer.style.marginLeft = adContainer.offsetLeft - 25 + "px";
  } else {
   n++;
   clear();
  }
 }
 var arr1 = new Array();

 leftBtn.onclick = function() {
  var y = window.setInterval("to_left()", 20);
  arr1.push(y);
 }

 function clear2() {
  for(var y in arr1) {
   window.clearInterval(arr1[y]);
  }
 }

 function to_left() {

  var adContainer = document.getElementById("ad-container");
  if(n == 1) {
   clear2();
  } else if(adContainer.offsetLeft != (n-2) * (-500)) {
   adContainer.style.marginLeft = adContainer.offsetLeft + 25 + "px";
  } else {
   n--;
   clear2();
  }
 }

 
</script>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播

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

Javascript 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 #Javascript
canvas 弹幕效果(实例分享)
Jan 11 #Javascript
JQuery实现动态操作表格
Jan 11 #Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 #Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 #Javascript
Vue数据驱动模拟实现2
Jan 11 #Javascript
jQuery实现对象转为url参数的方法
Jan 11 #Javascript
You might like
农民C键的运用技巧
2020/03/04 星际争霸
Zend Framework基本页面布局分析
2016/03/19 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
jquery表单插件form使用方法详解
2017/01/20 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python遍历数组的方法小结
2015/04/30 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python字符串,数值计算
2016/10/05 Python
Python线性方程组求解运算示例
2018/01/17 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python流程控制 if else实现解析
2019/09/02 Python
python构造IP报文实例
2020/05/05 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
大学教师年终总结的自我评价
2013/10/29 职场文书
商务英语本科生的自我评价分享
2013/11/15 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
广告宣传策划方案
2014/05/21 职场文书
消防安全标语
2014/06/07 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2014年教研员工作总结
2014/12/23 职场文书