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>

  • 相关阅读:
    ubuntu系统下安装最新版的MySQL
    scp本地服务器和远程服务器拷贝文件
    linux设置环境变量
    PHP程序员玩转Linux系列-lnmp环境的搭建
    nginx与负载均衡
    Linux下vim的常用命令总结
    nginx与location规则
    ssh秘钥对免密码登陆
    ubuntu下安装php pdo扩展和导入数据库
    ArrayList的删除实现
  • 原文地址:https://www.cnblogs.com/dej-11/p/7456016.html
Copyright © 2011-2022 走看看