zoukankan      html  css  js  c++  java
  • 如何实现点击左右按钮换图片?

    <div class="login_box" id="wrapper">
    <a onclick="leftCheck()" class="image_left"></a>
    <a id="image_right" onclick="rightCheck()" class="image_right"></a>
    <div id="imageContainer">
    <img src="../img/LoginIndexImg1.jpg" class="active" alt="" />
    <img src="../img/LoginIndexImg2.jpg" alt="" />
    <img src="../img/LoginIndexImg3.jpg" alt="" />
    </div>
    </div>

    / 登录页背景图切换
    var imageObject = {
        clickSwap : function(obj) {
            obj.click(function() {
                var activeImage = $(this).children('img.active');
                activeImage.removeClass('active');
                if (activeImage.next().length > 0) {
                    activeImage.next().addClass('active');
                } else {
                    $(this).children('img:first-child').addClass('active');
                }
                return false;
            });
        }
    };
    function leftCheck(){
    
                var activeImage = $('.active');
                activeImage.removeClass('active');
                if (activeImage.prev().length > 0) {
                    activeImage.prev().addClass('active');
                } else{
                    $("#imageContainer").children('img:last-child').addClass('active');
                    //activeImage.next().addClass('active');
                }
    
    
    
    
    };
    function rightCheck(){
                var activeImage = $('.active');
                activeImage.removeClass('active');
                if (activeImage.next().length > 0) {
                    activeImage.next().addClass('active');
                }else{
                    $("#imageContainer").children('img:first-child').addClass('active');
                    //activeImage.prev().addClass('active');
                }
                
    
    };
  • 相关阅读:
    DataGrip for Mac破解步骤详解 亲测好用
    git 之路
    linux用户管理
    virtualenvwrappers pipreqs 踩坑
    pycharm 快捷键
    kubernetes(k8s)之K8s部署多种服务yaml文件
    centos下彻底删除mysql的方法
    vi 和vim 的区别
    Django中related_name作用
    Windows CMD命令大全
  • 原文地址:https://www.cnblogs.com/master-zxc/p/4704568.html
Copyright © 2011-2022 走看看