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');
                }
                
    
    };
  • 相关阅读:
    通过Ajax的方式执行GP服务
    Arcgis for js之GP实现缓冲区计算
    sde用sql实现erase
    OL2中设置鼠标的样式
    OL2中重置地图DIV大小后地图的联动
    OL2中的多地图联动展示
    Codeforces Round #357 (Div. 2) Heap Operations
    POJ-1847 Tram
    【转】一些图论、网络流入门题总结、汇总
    POJ-2398 Toy Storage
  • 原文地址:https://www.cnblogs.com/master-zxc/p/4704568.html
Copyright © 2011-2022 走看看