JavaScript实现大图轮播效果

更新时间：2017年01月11日 14:19:31 作者：isykw

这篇文章主要为大家详细介绍了JavaScript实现大图轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
轮播

bootstrap的工具提示实例代码
Bootstrap 工具提示（Tooltip）插件当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。这篇文章通过实例代码给大家介绍bootstrap的工具提示功能，需要的朋友参考下吧
2017-05-05
javascript引擎长时间独占线程造成卡顿的解决方案
这篇文章主要介绍了javascript引擎长时间独占线程造成卡顿的解决方案,需要的朋友可以参考下
2014-12-12
JS 控制非法字符的输入代码
JS控制非法字符的输入实现代码，需要的朋友可以参考下。
2009-12-12
JS实现仿新浪微博发布内容为空时提示功能代码
这篇文章主要介绍了JS实现仿新浪微博发布内容为空时提示功能,
2015-08-08
JS Tween 颜色渐变
从我写的as tween改写的，基本功能跟as里面写的一样，只是没有扩展特定功能的接口（比如alpha2，move2，size2，color2等接口,这些在as tween里面都有实现）。
2008-12-12
微信小程序定义和调用全局变量globalData的实现
这篇文章主要介绍了微信小程序定义和调用全局变量globalData的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
JavaScript判断变量是否为数组的方法(Array)
这篇文章主要介绍了JavaScript判断变量是否为数组的方法(Array),涉及到javascript 数组变量相关知识，感兴趣的朋友一起学习吧
2016-02-02
微信小程序Vant组件库的安装与使用教程
之前推荐过的移动端web组件库 Vant是Vue.js版本的,其对内承载了有赞所有核心业务,对外有十多万开发者在使用,一直是业界主流的移动端组件库之一,下面这篇文章主要给大家介绍了关于微信小程序Vant组件库的安装与使用的相关资料,需要的朋友可以参考下
2022-09-09
全面解析js中的原型,原型对象,原型链
这篇文章主要介绍了图解js中的原型,原型对象,原型链,帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2021-01-01
JavaScript中const关键字的用法及特性
该文章讲解了JavaScript中const关键字的用法以及它的一些特性，该关键字用于创建常量，即一旦赋值之后就不能再修改，但是，使用 const创建的对象和数组却可以被修改，本文通过讲解“赋值”和“变异”之间的重要区别，详细解释了这一现象,需要的朋友可以参考下
2023-05-05