html5仿照手机端淘抢购滑动选择_html5手机滑动页面资源-CSDN文库

共5个文件

css：2个

html：1个

png：1个

左右滑动

4星 · 超过85%的资源需积分: 31 97 浏览量 2015-11-16 22:29:36 上传评论收藏 74KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

淘抢购.rar （5个子文件）

淘抢购

public.css 809B

swiper.js 101KB

big-sp.png 51KB

index.html 4KB

swiper.css 5KB

<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>淘抢购</title> <script src="swiper.js" type="text/javascript"></script> <link href="public.css" rel="stylesheet" type="text/css"> <link href="swiper.css" rel="stylesheet" type="text/css"> </head> <body> <div class="swiper-container gallery-thumbs swiper-container-horizontal"> <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <div class="swiper-slide swiper-slide-prev"><div style="text-align: center;padding-top: 5px;"><p style="font-size: 16px;">10:00</p><p>已开抢</p></div></div> <div class="swiper-slide swiper-slide-active"><div style="text-align: center;padding-top: 5px;"><p style="font-size: 16px;">15:00</p><p>抢购进行中</p></div></div> <div class="swiper-slide swiper-slide-next"><div style="text-align: center;padding-top: 5px;"><p style="font-size: 16px;">21:00</p><p>即将开场</p></div></div> </div> <div class="red-center"></div> <div class="xiaojiantou"></div> </div> <article style="margin-top: 50px;"> <div class="swiper-container gallery-top swiper-container-horizontal"> <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <div class="swiper-slide swiper-slide-prev" style="width:100%;display: flex;margin-top: 5px;"> <div style="width: 30%;height: 100px;"><img style="width: 100%;height: 100px;padding-top:10px;" src="big-sp.png"></div><div style="font-size:14px;color:black;width: 70%;height: 100px;"><p><span>华为手机</span> <span>标准版</span> <span>限时秒杀</span>  <span>6英寸</span> <span>金属机身</span></p></div> </div> <div class="swiper-slide swiper-slide-active" style="width:100%;display: flex;margin-top: 5px;"> <div style="width: 30%;height: 100px;"><img style="width: 100%;height: 100px;padding-top:10px;" src="big-sp.png"></div><div style="font-size:14px;color:black;width: 70%;height: 100px;"><p><span>华为手机</span> <span>标准版</span> <span>限时秒杀</span>  <span>6英寸</span> <span>金属机身</span></p></div> </div> <div class="swiper-slide swiper-slide-next" style="width:100%;display: flex;margin-top: 5px;"> <div style="width: 30%;height: 100px;"><img style="width: 100%;height: 100px;padding-top:10px;" src="big-sp.png"></div><div style="font-size:14px;color:black;width: 70%;height: 100px;"><p><span>华为手机</span> <span>标准版</span> <span>限时秒杀</span>  <span>6英寸</span> <span>金属机身</span></p></div> </div> </div> </div> </article> <script> var galleryTop = new Swiper('.gallery-top', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween:0, active:2, initialSlide:1 }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween:0, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true, active:2, initialSlide:1 }); galleryTop.params.control = galleryThumbs; galleryThumbs.params.control = galleryTop; </script> <script language="javascript"> function display(li){ li.className='active'; var subdis=li.getElementsByTagName("ul")[0]; subdis.style.display="block"; } function ndisplay(li){ li.className='noactive'; var subdis=li.getElementsByTagName("ul")[0]; subdis.style.display="None"; } var preBtn=document.querySelectorAll('.pre-btn'); for (var j=0; j<preBtn.length; j++) { preBtn[j].onclick = function(){ this.style.display='none'; this.parentNode.querySelector('.pre-load').style.display='none'; myframe=this.parentNode.querySelector('iframe'); framesrc=myframe.attributes["data-src"].value; myframe.setAttribute("src",framesrc); } } </script> </body> </html>

评论收藏

内容反馈