zoukankan      html  css  js  c++  java
  • [Jquery]某宝图片轮播(无缝、带左右切换按钮)

    【效果】

    左右移动(非渐隐)

    【思路】

    1.结构与样式

    ①最外层div盒子当容器,里面ul宽度无限大并且相对定位(到时候移动其实移的是ul的left)

    ②按钮的透明度可用background:rgba()来搞定

    ③最后一张图片后面紧接第一张,第一张前面紧接最后一张,也就是5123451(不这样做两张图片没有办法贴在一起),这是无缝的关键

    ④如果是全屏轮播,不能直接用img标签插入图片,会有横向滚动条。应该用background,并用绝对定位(而不是浮动)

    2.js

    ①每次点击按钮,移动的ul距离就是,当前图片的索引*图片宽度

    ②当移到第“6”张图片时(即5后面的1),应该立刻把他拉回1的位置,但要注意这个判断瞬间拉回的语句,应该写在animate的function里,保证动画执行完后无瑕疵的拉回,而不是跟animate并行,那样会往左移到第一张,而不是无缝右滚动到第一张,反方向亦然。

    ③点击过快会有bug,一直快速点图片移空了

    原因:整个运动还没结束前,就进行下一次点击了

    解决方法:两次点击之间,做一个间隔(即两次点击的时间间隔大于一个值时,才执行动画)

  • 相关阅读:
    微博深度学习平台架构和实践
    2020暑期学习
    2020春季学期个人课程总结
    人月神话阅读笔记03
    人月深化阅读笔记02
    第十六周学习总结
    人月神话阅读笔记01
    三分算法
    [SDOI2010]魔法猪学院
    【洛谷】NOIP2018原创模拟赛DAY1解题报告
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/4689713.html
Copyright © 2011-2022 走看看