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 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
浅谈javascript的闭包
Jan 23 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 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
利用php获取服务器时间的实现代码
2013/06/07 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
JS获取html对象的几种方式介绍
2013/12/05 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
深入解析Python中的WSGI接口
2015/05/11 Python
python开发之list操作实例分析
2016/02/22 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
python实现屏保计时器的示例代码
2018/08/08 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
租赁协议书范本
2014/04/22 职场文书
师德演讲稿范文
2014/05/06 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
微笑服务标语
2014/06/24 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
python四种出行路线规划的实现
2021/06/23 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL