点击轮播图片左右button,实现轮播效果

点击轮播图片左右button,实现轮播效果

大家好,又见面了,我是全栈君。

点击左右button。实现图片轮播效果。js代码例如以下:

$(function () {
    var index = 1;
    var pPage = 1;
    var $v_citemss = $(".citemss");
    var $v_show = $v_citemss.find("ul");
    v_width = $v_citemss.width();     //图片展示区外围div的大小

    //注:若为整数,前边不能再加var。否则会被提示underfine
    p_count = $v_citemss.find("li").length;   //获取此处li的个数
    $(".slideprev1").click(function () {
        if (!$v_show.is(":animated")) {
            if (pPage == index) {
                $v_show.animate({ right: '0px' }, "3000");
                pPage = 4;
            } else {
                $v_show.animate({ right: '-=' + v_width }, "3000");
                pPage--;
            }
        }
    });

    $(".slidenext").click(function () {
        if (!$v_show.is(":animated")) {
            if (pPage == p_count) {
                $v_show.animate({ left: '0px' }, "3000");
                pPage = 1;
            } else {
                $v_show.animate({ left: '-=' + v_width }, "3000");
                pPage++;
            }
        }
    });

});

对于鼠标悬浮上去,下方出现横条描写叙述、左右出现button等效果,全然能够用css实现,不须要使用js来实现了。

详细操作:css中绝对或相对定位,left,right或bottom为负数,鼠标悬浮上去后,分别正确显示,再设置一下transition,作为动画的缓冲就可以。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116238.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • IIC通信协议详解[转载][通俗易懂]

    IIC通信协议详解[转载][通俗易懂]IIC的基本介绍IIC的简介IIC(Inter-IntegratedCircuit)总线是一种由PHILIPS公司在80年代开发的两线式串行总线,用于连接微控制器及其外围设备。它是半双工通信方式。IIC总线最主要的优点是其简单性和有效性。由于接口直接在组件之上,因此IIC总线占用的空间非常小,减少了电路板的空间和芯片管脚的数量,降低了互联成本。总线的长度可高达25英尺,并且能够以10Kbps的最大传输…

  • keras提供的网络_kubernetes网络

    keras提供的网络_kubernetes网络GoogleNet网络详解与keras实现GoogleNet网络详解与keras实现GoogleNet系列网络的概览Pascal_VOC数据集第一层目录第二层目录第三层目录InceptionV1模块介绍Inception的架构GoogleNet的图片Keras代码实现为了搭建Inception网络我们使用了以下策略整个代码的流程如下实验结果实验结果分析本博客相关引用本

  • 快速搭建个人博客——保姆级教程「建议收藏」

    文章目录序言本地网站开发工具WebStormVscode框架Hexo(强烈推荐)WordPress本地环境gitnode.jsHexo安装初始化主题样式Butterfly应用正式上线图床Butterfly配置GitHubPages配置服务器选购攻略阿里云学生专享活动专享腾讯云学生专享活动专享域名购买DNS解析添加域名添加解析记录服务器购买部署密码设定远程连接git配置安装NginxHexo配置修改备案ICP联网备案序言偶然间,看到某乎上高赞的一个问题:怎么证明下计算机专业学生的能力?问题下面呢,也是有

  • uC/os内存优化——TLSF算法

    uC/os内存优化——TLSF算法需求uC/os内存管理机制为内存块形式,用户申请内存是需要自己指定内存区内内存块数和内存块大小,看起来很灵活,实际上很不方便,需要使用者记住内存块大小,自己维护内存区,给使用者增加了负担。TLSF算法能够满足实时性的要求,并且可有效的较小内部碎片。TLSF作为分离式空闲链表算法(SegregatedFreeLists)的拓展–将相似的空闲块利用数组或者二叉树进行管理从而使响应时间与空…

  • PHP蜘蛛爬虫开发文档

    PHP蜘蛛爬虫开发文档

  • PropertyDescriptor属性描述类学习

    PropertyDescriptor属性描述类学习1构造方法通过调用getFoo和setFoo存取方法,为符合标准Java约定的属性构造一个PropertyDescriptor publicPropertyDescriptor(StringpropertyName, Class<?>beanClass) 该构造函数使用简单属性的名称,以及读取和写入属性的方法名称publicPropertyDes…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号