点击轮播图片左右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,作为动画的缓冲就可以。

 

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 腾讯与唯品会笔试面试经历[通俗易懂]

    腾讯与唯品会笔试面试经历

    2022年2月2日
    41
  • php sigpipe,遭遇SIGPIPE[转]

    php sigpipe,遭遇SIGPIPE[转]转自:http://www.diybl.com/course/3_program/c++/cppjs/20090831/173152.html我写了一个服务器程序,在Windows下在cygwin环境编译后执行,然后用C#写了多线程客户端进行压力测试.程序一直运行正常.但当在Linux下测试时,总是莫名退出.最后跟踪到是write调用导致退出.用gdb执行程序,退出时提示”Broken…

    2022年5月30日
    36
  • GTEST学习总结

    GTEST学习总结目录1.编译及学习资料1.1编译gtest1.2学习文档及资料2.gtest总结2.1gtest中的术语2.2断言2.2.1基本断言2.2.2BinaryComparison2.2.3Stringcomparison2.3创建测试用例2.4TestFixtures2.5更多断言方法2.6异常断言2.7自定义输出语句2.8…

    2022年9月29日
    3
  • IIC 通信协议

    IIC 通信协议IIC通信协议I2C(IIC,Inter-IntegratedCircuit),数据线SDA(data)和时钟SCL(clock)构成的串行总线,双向传送。高速IIC总线一般可达400kbps以上。IIC是半双工通信方式。时序图主机:起始信号—–>第一位——>第二位———>……..——–>第八位———>等待应答信号——->停止信号大致的一个数据传输流程是:主机向SDA线上发送一个起始信号,表示有信号进行传输,此时所有连接到IIC总线

    2022年4月29日
    49
  • putty怎么用?如何使用Putty远程管理Linux主机

    putty怎么用?如何使用Putty远程管理Linux主机

    2021年10月8日
    47
  • vue插槽slot-scope_slot插槽的使用方法

    vue插槽slot-scope_slot插槽的使用方法vue中的插槽————slot什么是插槽?插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。

    2022年8月4日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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