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');
                }
                
    
    };
  • 相关阅读:
    Vue项目使用路由和elementUI
    Vue-cli组件化开发
    vue实现数据请求
    element-e作业
    vue入门
    BBS(仿博客园小作业)
    Django-Auth模块
    Django中间件
    cookie和session
    forms组件和自定义分页器
  • 原文地址:https://www.cnblogs.com/master-zxc/p/4704568.html
Copyright © 2011-2022 走看看