JS: 图片轮播模板——左右移动，点击编码移动，自动轮播

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   * {
    margin: 0px;
    padding: 0px;
   }

   #stage {
    width: 500px;
    height: 300px;
    border: 3px solid black;
    margin: 100px;
    overflow: hidden;
    position: relative;
   }

   #banner {
    width: 3000px;
    height: 300px;
    background-color: rosybrown;
   }

   .items {
    width: 500px;
    height: 300px;
    color: white;
    font-size: 150px;
    text-align: center;
    line-height: 300px;
    float: left;
   }

   .btn-l,
   .btn-r {
    width: 50px;
    height: 300px;
    background-color: black;
    opacity: 0.5;
    color: white;
    font-size: 40px;
    line-height: 300px;
    text-align: center;
    position: absolute;
    top: 0px;
   }

   .btn-l {
    left: 0px;
   }

   .btn-r {
    right: 0px;
   }

   .btn-l:hover,
   .btn-r:hover {
    cursor: pointer;
    opacity: 0.2;
   }

   .points {
    position: absolute;
    bottom: 10px;
    left: 200px;
    /*background-color: orangered;*/
    width: 125px;
    height: 20px;
   }

   .dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: gainsboro;
    float: left;
    margin-right: 5px;
    cursor: pointer;
   }

   .active {
    background-color: red;
   }
  </style>
</head>

</html>
<script>
// 取对象
var btn_l = document.getElementsByClassName('btn-l')[0];
var btn_r = document.getElementsByClassName("btn-r")[0];
var banner = document.getElementById("banner");
var dots = document.getElementsByClassName('dot');
// 定义变量
var count = 1;
var arr = [];
// 右侧按钮点击事件
btn_r.onclick = function() {
  if(count < 6) {
   count++;
   arr.push(window.setInterval("move_left()", 20));
  } else if(count == 6) {
   count = 1;
   banner.style.marginLeft = 0 + 'px';
   count++;
   arr.push(window.setInterval("move_left()", 20));
  }
  for(var i = 0; i < dots.length; i++) {
   dots[i].setAttribute("class", "dot");
  }
  dots[count - 1].setAttribute("class", "dot active");
}
// 左侧按钮点击事件
btn_l.onclick = function() {
  if(count > 1) {
   count--;
   arr.push(window.setInterval("move_right()", 20));
  }else if(count == 1){
   count = 6;
   banner.style.marginLeft = -2500 + 'px';
   count--;
   arr.push(window.setInterval("move_right()", 20));
  }

  for(var i = 0; i < dots.length; i++) {
   dots[i].setAttribute("class", "dot");
  }
  dots[count - 1].setAttribute("class", "dot active");
}
// 向左移动
function move_left() {
  if(banner.offsetLeft == (count - 1) * (-500)) {
   clear();
  } else {
   banner.style.marginLeft = banner.offsetLeft - 20 + "px";
  }

}
// 向右移动
function move_right() {
  if(banner.offsetLeft == (count - 1) * (-500)) {
   clear();
  } else {
   banner.style.marginLeft = banner.offsetLeft + 20 + "px";
  }
}
// 清除所有间隔执行
function clear() {
  for(var x in arr) {
   window.clearInterval(arr[x]);
  }
}
// 批量添加点击事件
for(var j = 0; j < dots.length; j++) {
  dots[j].onclick = function() {
   count_s = this.getAttribute("data");
   if(count > count_s) {
    count = count_s;
    arr.push(window.setInterval("move_right()", 20));
   } else if(count < count_s) {
    count = count_s;
    arr.push(window.setInterval("move_left()", 20));
   }

for(var i = 0; i < dots.length; i++) {
    dots[i].setAttribute("class", "dot");
   }
   this.setAttribute("class", "dot active");
  }
}
// 自动轮播
function auto_move(){
  if(count < 6) {
   count++;
   arr.push(window.setInterval("move_left()", 20));
  } else if(count == 6) {
   count = 1;
   banner.style.marginLeft = 0 + 'px';
   count++;
   arr.push(window.setInterval("move_left()", 20));
  }
  for(var i = 0; i < dots.length; i++) {
   dots[i].setAttribute("class", "dot");
  }
  dots[count - 1].setAttribute("class", "dot active");
}
window.setInterval("auto_move()",3000);
</script>

JS: 图片轮播模板——左右移动，点击编码移动，自动轮播的更多相关文章

js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
js 图片轮播简单版
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
js 图片轮播（一）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
js 图片轮播代码编辑
图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...
angular js 图片轮播
搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...
js图片轮播图
/*焦点图*/ var Box='.carousel';//盒子 var Menu=$(Box+' .l_cursor li');//圆点菜单 var Con ...
Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
非常简洁的js图片轮播
<div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...

随机推荐

吴裕雄--天生自然ORACLE数据库学习笔记：表分区与索引分区
create table ware_retail_part --创建一个描述商品零售的数据表 ( id integer primary key,--销售编号 retail_date date,--销售 ...
【转】CGI 和 FastCGI 协议的运行原理
介绍深入CGI协议 CGI的运行原理 CGI协议的缺陷深入FastCGI协议 FastCGI协议运行原理为什么是 FastCGI 而非 CGI 协议 CGI 与 FastCGI 架构再看 Fa ...
Selenium+webdriver自动化登陆QQ邮箱并发送邮件
1.关于selenium Selenium的主要功能包括:(1)测试与浏览器的兼容性:测试应用程序能否兼容工作在不同浏览器和操作系统之上.(2)测试系统功能:录制用例自动生成测试脚本,用于回归功能测 ...
Codeforces Round #585 (Div. 2)E（状态压缩DP，思维）
#define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h>using namespace std;long long n,x;long lon ...
android 简单列表对话框（AlertDialog.Builder().setItems()）
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...
docker的私有化仓库harbor搭建
目前比较流行的docker私有化仓库是harbor,harbor是一个github开源的项目,直接在github上搜索即可,下载地址:https://github.com/goharbor/harbo ...
CSP-J2019 纪念品
Description: Solution: 第一天买入,第二天卖出,在干些别的,再把第二天刚卖出的再买回来,就相当于是啥也没干.也就是说手中的物品本身要算在手中的钱中.这也就是为什么 dp 的状态可 ...
利用django打造自己的工作流平台(二):疫情统计系统
相关文章: 利用django打造自己的工作流平台(一):从EXCEL到流程化运作本文是“利用django打造自己的工作流平台”系列文章的第二篇,在自己开发的工作流平台中添加了一个用于排查统计可能受感 ...
常见Http状态码大全详解
HTTP状态码的分类 HTTP状态码由三个十进制数字组成,第一个十进制数字定义了状态码的类型,后两个数字没有分类的作用.HTTP状态码共分为5种类型: 具体如下: 状态码内容详细内容信息告知 - ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：条纹表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

JS: 图片轮播模板——左右移动，点击编码移动，自动轮播

JS: 图片轮播模板——左右移动，点击编码移动，自动轮播的更多相关文章

随机推荐

热门专题