前端全栈大佬是如何使用javaScript实现一个无缝轮播优化

举报
孙叫兽 发表于 2021/03/28 03:04:51 2021/03/28
【摘要】 效果图: 代码如下: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>优化后的无缝轮播图</title> <style> body{-webkit-user-select: none; } ul,l...

效果图:

代码如下:


  
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>优化后的无缝轮播图</title>
  6. <style>
  7. body{-webkit-user-select: none; }
  8. ul,li{
  9. list-style: none;
  10. }
  11. #outer{
  12. width: 400px;
  13. height: 300px;
  14. position: relative;
  15. margin: 50px auto;
  16. overflow: hidden;
  17. }
  18. #inner{
  19. width: 2000px;
  20. height: 300px;
  21. position: absolute;
  22. left:0;
  23. }
  24. #inner div{
  25. width: 400px;
  26. height: 300px;
  27. float: left;
  28. }
  29. #ulHead{
  30. position: absolute;
  31. top: 250px;
  32. right: 20px;
  33. }

文章来源: sunmenglei.blog.csdn.net,作者:孙叫兽,版权归原作者所有,如需转载,请联系作者。

原文链接:sunmenglei.blog.csdn.net/article/details/111471404

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。