<!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>

<body>
  <div id="stage">
   <div class="btn-l">
    <</div>
     <div class="btn-r">></div>
     <div id="banner">
      <div class="items" style="">1</div>
      <div class="items" style="">2</div>
      <div class="items" style="">3</div>
      <div class="items" style="">4</div>
      <div class="items" style="">5</div>
      <div class="items" style="">1</div>
     </div>
     <div class="points">
      <div data="1" class="dot active"></div>
      <div data="2" class="dot"></div>
      <div data="3" class="dot"></div>
      <div data="4" class="dot"></div>
      <div data="5" class="dot"></div>
     </div>
   </div>
 </body>

</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: 图片轮播模板——左右移动，点击编码移动，自动轮播的更多相关文章

  1. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  2. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  4. js 图片轮播（一）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. js 图片轮播代码编辑

    图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...

  6. angular js 图片轮播

    搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...

  7. js图片轮播图

    /*焦点图*/        var Box='.carousel';//盒子        var Menu=$(Box+' .l_cursor li');//圆点菜单        var Con ...

  8. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 非常简洁的js图片轮播

    <div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...

随机推荐

  1. Socket通信实现步骤

    public class Server { public static void main(String[] args) { try { ServerSocket serverSocket = new ...

  2. mysql 统计索引执行情况

    select distinct b.TABLE_SCHEMA,b.TABLE_NAME , b.INDEX_NAME , a.count_starfrom performance_schema.tab ...

  3. C++中的四种类型转换运算符static_cast、dynamic_cast、const_cast和reinterpret_cast的使用

    1.上一遍讲述了C语言的隐式类型转换和显示类型转换,C语言之所以增加强制类型转换,就是为了强调转换的风险性,但这种强调风险的方式是比较粗放了,粒度比较大,它并没有表明存在什么风险,风险程度如何. 2. ...

  4. ch8 基于浮动的布局（两列浮动布局、三列浮动布局）

    CSS布局技术的根本是3个基本概念:定位.浮动.外边距操纵. 只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动.因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围他们的块框产生任何影响 ...

  5. ABC155F - Perils in Parallel

    简述题意 给你N个数对 表示坐标与状态(0/1), M个操作,给定一个区间,区间内的坐标的状态翻转 思路:看到区间修改,很容易想到差分,对数对sort,每个a_i与a_i-1异或构造差分数组b,每次对 ...

  6. Django 学习 之 模板(html)与配置静态文件

     一.模板(html) 1.模板语法之变量:语法为 {{ }} 在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法:{{ var_name }} var_name 是一个变量名称,需要和 ...

  7. 使用element-ui组件el-table时需要修改某一行或列的样式（包含解决选择器无效问题）

    在后台管理系统项目中,经常会使用element-ui中的组件el-table(表格)来展示列表数据. 当展示数据的时候,可能就需要给给某一行或者列设置特殊的样式,在查询文档是我遇到了一些问题:包括设置 ...

  8. 报错google.protobuf.text_format.ParseError: 166:8 : Message type "object_detection.protos.RandomHorizontalFlip" has no field named "i".解决方法

    运行python train.py --logtostderr --train_dir=training/ --pipeline_config_path=training/ssd_mobilenet_ ...

  9. Hadoop端口与界面

    NameNode:7180 Cloudera Manager集群管理界面: NameNode:50070 NameNode Web UI/数据管理界面:   NameNode:8020/9000 Ha ...

  10. popupwindow使用之异常：unable to add window -- token null is not valid

    使用popwindow中又碰到一个白痴问题,在此留作纪念,希望对大家有帮助 popupwindow之所以叫这个名字,肯定是要从某个地方弹出啦,但是从哪个地方呢?必须是指定一个view嘛 void an ...