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 限制输入脚本大全
Nov 03 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
php+js实现倒计时功能
Jun 02 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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
杏林同学录(二)
2006/10/09 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
javascript基础知识
2016/06/07 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
就业意向书
2014/07/29 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
优秀团支部申报材料
2014/12/26 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js