zoukankan      html  css  js  c++  java
  • js 图片轮播代码编辑

    图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放。

    <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");
    }
    }
    // 自动轮播 将点击事件放在新事件中,然后设定间隔执行。window.setInterval()
    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>

  • 相关阅读:
    C#中对文件进行选择对话框打开和保存对话框进行复制
    二、RabbitMQ操作
    二、TortoiseSVN 合并、打分支、合并分支、切换分支
    一、Google开发者工具功能页面截图
    一、RabbitMQ安装与测试连接
    二、jquery Try{}catch(e){}
    ViewMode
    三、MVC_JsonResult类型
    随笔集
    五、SQL Server Profiler追踪工具
  • 原文地址:https://www.cnblogs.com/dej-11/p/7456016.html
Copyright © 2011-2022 走看看