本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="reset.css" rel="external nofollow" > <style> html,body{ width:100%; overflow-x:hidden; } html{ font-size:100px; } .banner{ position:relative; height:3rem; overflow:hidden; } .banner .wrapper{ position:absolute; top:0; left:-100%; height:100%; } .banner .wrapper .slide{ float:left; height:100%; background:#eee; } .banner .wrapper .slide img{ display:none; width:100%; height:100%; } .tip{ position:absolute; left:0; bottom:.1rem; width:100%; height:.16rem; text-align:center; } .tip li{ display:inline-block; margin:0 .03rem; width:.16rem; height:.16rem; background:rgba(0,0,0,0.2); border-radius:50%; vertical-align:top; } .tip li.bg{ background:#007aff; } </style> </head> <body> <section class='banner'> <div class='wrapper'> <!--实现无缝滚动:把第一张放末尾 最后一张放开头--> <div class='slide'><img data-src="/UploadFiles/2021-04-02/banner5.jpg">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,移动端,轮播图
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“js实现移动端轮播图效果”评论...
更新动态
2024年09月27日
2024年09月27日
- 张学友.1999-有个人【宝丽金】【WAV+CUE】
- 纯音入心系列纯音乐《古筝佛曲》1CD[MP3][411.1MB]
- 纯音入心系列纯音乐《古筝世界名曲》1CD[MP3][38.9MB]
- 纯音入心系列纯音乐《古筝新奏-菩提妙音》1CD[MP3][112.3MB]
- 陈思安.1993-怀念福建金曲5CD【歌丽美】【WAV+CUE】
- 张学友.1999-有个人【宝丽金】【WAV+CUE】
- 许美静.1999-快乐无罪【上华】【WAV+CUE】
- 群星.2024-Jambo.Medley(BEYOND40周年·致敬2)【Kinns】【FLAC分轨】
- 林翠萍.1991-舞曲世界2辑【星河】【WAV+CUE】
- 关智斌.2007-In.Progress【英皇娱乐】【FLAC分轨】
- 群星.2000-电影主题曲原声带·琼瑶的世界【歌林】【WAV+CUE】
- 范世錡.2024-錡妙夜(EP)【天娱传媒】【FLAC分轨】
- 谭咏麟.2000-魅力千禧演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 纯音入心系列纯音乐《器乐古筝》1CD[MP3][239MB]
- 纯音入心系列纯音乐《华夏民乐之古筝篇》1CD[MP3][192MB]