效果展示： index.html
<!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="css/base.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="jd_container"> <!-- 顶部搜索 --> <header class="jd_search"> <div class="jd_container_box"> <a href="javascript:;" class="icon_logo"></a> <form action="#"> <span class="icon_search"></span> <input type="search" placeholder="输入想搜索的商品"/> </form> <a href="#" class="login">登录</a> </div> </header> <!-- 轮播图 --> <div class="jd_banner"> <ul class="clearFix"> <li><a href=""><img src="images/l8.jpg" alt=""></a></li> <li><a href=""><img src="images/l1.jpg" alt=""></a></li> <li><a href=""><img src="images/l2.jpg" alt=""></a></li> <li><a href=""><img src="images/l3.jpg" alt=""></a></li> <li><a href=""><img src="images/l4.jpg" alt=""></a></li> <li><a href=""><img src="images/l5.jpg" alt=""></a></li> <li><a href=""><img src="images/l6.jpg" alt=""></a></li> <li><a href=""><img src="images/l7.jpg" alt=""></a></li> <li><a href=""><img src="images/l8.jpg" alt=""></a></li> <li><a href=""><img src="images/l1.jpg" alt=""></a></li> </ul> <ul> <li class="now"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <!-- 分类部分 --> <nav class="jd_nav"> <ul class="clearFix"> <li><a href=""><img src="images/nav0.png" alt=""><p>分类</p></a></li> <li><a href=""><img src="images/nav1.png" alt=""><p>分类</p></a></li> <li><a href=""><img src="images/nav2.png" alt=""><p>分类</p></a></li> <li><a href=""><img src="images/nav3.png" alt=""><p>分类</p></a></li> <li><a href=""><img src="images/nav4.png" alt=""><p>分类</p></a></li> <li><a href=""><img src="images/nav5.png" alt=""><p>分类</p></a></li> <li><a href=""><img src="images/nav6.png" alt=""><p>分类</p></a></li> <li><a href=""><img src="images/nav7.png" alt=""><p>分类</p></a></li> </ul> </nav> <div class="jd_product"> <section class="jd_product_box"> <div class="title no_bottom"> <span class="icon_clock"></span> <span class="product_decoration">掌上描述</span> <div class="time"> <span>0</span> <span>0</span> <span>:</span> <span>0</span> <span>0</span> <span>:</span> <span>0</span> <span>0</span> </div> <span class="more f_right">更多></span> </div> <div class="con"> <ul class="clearFix"> <li> <a href="#"><img src="images/detail01.jpg" alt=""></a> <p class="new-price">¥10.00</p> <p class="old-price">¥100.00</p> </li> <li> <a href="#"><img src="images/detail01.jpg" alt=""></a> <p class="new-price">¥10.00</p> <p class="old-price">¥100.00</p> </li> <li> <a href="#"><img src="images/detail01.jpg" alt=""></a> <p class="new-price">¥10.00</p> <p class="old-price">¥100.00</p> </li> </ul> </div> </section> <section class="jd_product_box"> <div class="title"><h3>京东超市</h3></div> <div class="con clearFix"> <a href="#" class="w50 br f_left"><img src="images/cp1.jpg" alt=""></a> <a href="#" class="w50 bb f_right"><img src="images/cp2.jpg" alt=""></a> <a href="#" class="w50 f_right"><img src="images/cp3.jpg" alt=""></a> </div> </section> <section class="jd_product_box"> <div class="title"><h3>京东超市</h3></div> <div class="con clearFix"> <a href="#" class="w50 f_left br"><img src="images/cp4.jpg" alt=""></a> <a href="#" class="w50 f_right bb"><img src="images/cp5.jpg" alt=""></a> <a href="#" class="w50 f_right bb"><img src="images/cp6.jpg" alt=""></a> </div> </section> <section class="jd_product_box"> <div class="title"><h3>京东超市</h3></div> <div class="con clearFix"> <a href="#" class="w50 br f_left"><img src="images/cp1.jpg" alt=""></a> <a href="#" class="w50 bb f_right"><img src="images/cp2.jpg" alt=""></a> <a href="#" class="w50 f_right"><img src="images/cp3.jpg" alt=""></a> </div> </section> </div> </div> <script src="js/common.js"></script> <script src="js/index.js"></script> </body> </html>base.css:
/*-------------------reset css---------------*/ *, *::before, *::after { margin: 0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; /* 点击高亮效果->移动端，<a>*/ tap-highlight-color:transparent; -webkit-tap-highlight-color:transparent; } body{ font-size: 14px; font-family: "Microsoft YaHei",sans-serif; color: #333; } ul, ol { list-style: none; } a { text-decoration: none; color: #333; } input,textarea { border:none; outline:none; resize:none; /*元素的外观，none->设置成所有没有任何样式*/ appearance:none; -webkit-appearance:none; /*-webkit-appearance:button;*/ } /*--------------common css------------------*/ .f_left { float: left; } .f_right { float: right; } .clearFix::before, .clearFix::after { content: ""; display: block; visibility: hidden; height: 0; line-height: 0; clear: both; } .ml_10 { margin-left:10px; } .mr_10 { margin-right:10px; } .mt_10 { margin-top:10px; } .mb_10 { margin-bottom:10px; } /*精灵图公共样式*/ [class^="icon_"], [class*=" icon_"] { background-image: url("../images/sprites.png"); background-size: 200px 200px; background-repeat: no-repeat; } .w50{ width: 50%; display: block; } .w50 img { width: 100%; display: block; } .bl { border-left:2px solid #ccc; } .bb { border-bottom:2px solid #ccc; } .br { border-right:2px solid #ccc; }index.css
body { background: #f5f5f5; } /*版心*/ .jd_container { width: 100%; min-width: 320px; max-width: 640px; /*background: pink;*/ margin:0 auto; height: 1000px; } /*顶部搜索*/ .jd_search{ width: 100%; height: 40px; position: fixed; left: 0; top: 0; z-index: 1000; } .jd_search > .jd_container_box { min-width: 320px; max-width: 640px; width: 100%; height: 40px; margin: 0 auto; background: rgba(201,21,35,0); position: relative; } .jd_search > .jd_container_box .icon_logo { position: absolute; top:0; left: 10px; height: 40px; width: 60px; background-position: 0 -103px; } .jd_search > .jd_container_box .login { position: absolute; top:0; right: 0; height: 40px; line-height: 40px; font-size: 18px; width: 50px; color:#fff; } .jd_search > .jd_container_box form { width: 100%; padding-left: 80px; padding-right: 60px; position: relative; } .jd_search > .jd_container_box form input { width: 100%; height: 30px; background: #fff; margin-top:5px; border-radius: 15px; text-indent: 40px; } .jd_search > .jd_container_box form .icon_search { position: absolute; width: 20px; height: 20px; background-position: -60px -109px; top:10px; left:90px; } /*轮播图*/ .jd_banner { width: 100%; overflow: hidden; position: relative; } .jd_banner ul:first-child { width: 1000%; transform: translateX(-10%); -webkit-transform: translateX(-10%); } .jd_banner ul:first-child li { width: 10%; float: left; } .jd_banner ul:first-child li a{ display: block; width: 100%; } .jd_banner ul:first-child li a img{ display: block; width: 100%; } .jd_banner ul:last-child { position: absolute; bottom: 8px; left:50%; transform:translateX(-50%); } .jd_banner ul:last-child li{ width: 6px; height: 6px; border-radius: 50%; border:1px solid #fff; margin-left:10px; float: left; } .jd_banner ul:last-child li:nth-of-type(1){ margin-left:0; } .jd_banner ul:last-child li.now{ background: #fff; } /*分类*/ .jd_nav { width: 100%; padding-bottom: 20px; background: #fff; border-bottom: 1px solid #ccc; } .jd_nav ul { width: 100%; } .jd_nav ul li{ width: 25%; float: left; } .jd_nav ul li a{ width: 100%; display: block; } .jd_nav ul li a img{ width: 100%; display: block; height: 50px; width: 50px; margin: 15px auto; } .jd_nav ul li a p{ text-align: center; color:#666; } /*产品部分*/ .jd_product { width: 100%; margin-top: 10px; } .jd_product .jd_product_box { margin-top: 10px; background: #fff; width: 100%; box-shadow: 0 0 2px #ccc; } .jd_product .jd_product_box .title { height: 30px; border-bottom: 1px solid #ccc; position: relative; } .jd_product .jd_product_box .title.no_bottom { border-bottom: 0; } .jd_product .jd_product_box .title h3 { font-weight: normal; line-height: 30px; position: relative; padding-left:20px; color: #666; } .jd_product .jd_product_box .title h3::before { content: ""; width: 3px; height: 15px; background: red; position: absolute; top:50%; transform:translateY(-50%); left: 10px; } /*产品部分第一栏*/ .jd_product .title .icon_clock { position: absolute; width: 20px; height: 23px; float: left; background: url("../images/seckill-icon.png") center/ 20px 23px no-repeat; top:7px; left:10px; } .jd_product .title .product_decoration { position: absolute; top:10px; left:35px; font-size: 16px; color: #d8505c; } .jd_product .title .time { position: absolute; top:10px; left:110px; } .jd_product .title .time span { display: block; float: left; width: 13px; height: 20px; background: #000; color: #fff; margin-left: 5px; line-height: 20px; text-align: center; } .jd_product .title .time span:nth-child(3n) { background: #fff; color: #000; width: 3px; } .jd_product .title .more { right: 10px; position: absolute; top:10px; } /*产品第一部分主体*/ .con { width: 100%; } .jd_product_box:first-child .con { padding: 16px 0; } .con ul { width: 100%; } .con ul li { float: left; width: 33.333333%; } .con ul li a { width: 100%; display: block; border-right:1px solid #ccc; } .con ul li:last-child a { border:0; } .con ul li a img { display: block; width: 64%; margin:0 auto; } .con ul li .new-price { text-align: center; color: #d8505c; } .con ul li .old-price { text-align: center; text-decoration: line-through; }index.js
window.onload = function(){ search(); banner(); download(); } // 滑动滚动条使jdContainerBox颜色渐变深 var search = function() { var jdContainerBox = document.querySelector('.jd_container_box'); var jdBanner = document.querySelector('.jd_banner'); // 获取到轮播图的高度 var jdBannerHeight = jdBanner.offsetHeight; window.onscroll = function(){ // 获取滚动的高度 var scrollTop = document.documentElement.scrollTop; // console.log(scrollTop); // 相比进行计算出透明度 var optical = jdBannerHeight / scrollTop; if(scrollTop < jdBannerHeight) { jdContainerBox.style.background = 'rgba(201,21,35,'+ optical + ')'; }else { jdContainerBox.style.background = 'rgba(201,21,35,'+ 0.85 + ')'; } } } var banner = function() { // 获取元素 var jdBanner = document.querySelector('.jd_banner'); var screenWidth = jdBanner.offsetWidth; var imagesBox = jdBanner.querySelector('ul:nth-of-type(1)'); var count = imagesBox.children.length; var pointBox = jdBanner.querySelector('ul:nth-of-type(2)'); // 清除过渡和位移 var clearTransition = function(){ imagesBox.style.transition = 'none'; imagesBox.style.webkitTransition = 'none'; imagesBox.style.transform = 'translateX('+ (-index * screenWidth) + 'px)'; imagesBox.style.wewbkitTransform = 'translateX('+ (-index * screenWidth) + 'px)'; } //自动播放->index var index = 1; var bannerTimer = setInterval(function() { index++; imagesBox.style.transform = 'translateX('+ -index * screenWidth + 'px)'; imagesBox.style.wewbkitTransform = 'translateX('+ -index * screenWidth + 'px)'; imagesBox.style.transition = 'all 0.5s'; imagesBox.style.webkitTransition = 'all 0.5s'; },3000); imagesBox.addEventListener('transitionend',function(){ if(index >= count-1) { index = 1; clearTransition(); } if(index <= 0) { index = 8; clearTransition(); } // 这里的索引是1-8 setPoint(); }); // 轮播图下的小点 var setPoint = function() { var liList = pointBox.children; for(var i = 0; i < liList.length; i++) { var obj = liList[i]; obj.classList.remove("now"); } liList[index-1].classList.add("now"); } // 滑动事件 var ismove = false;//防止用户不小心点了一下也当滑动处理 var startX = 0; var distance = 0; imagesBox.addEventListener("touchstart",function(e){ clearInterval(bannerTimer); startX = e.touches[0].clientX; }); imagesBox.addEventListener("touchmove",function(e){ var moveX = e.touches[0].clientX; distance = moveX-startX; // 一定要加上原有的定位 imagesBox.style.transform = 'translateX('+ (-index * screenWidth + distance) + 'px)'; ismove = true; }); imagesBox.addEventListener("touchend",function(e){ if(ismove) { if(Math.abs(distance) < screenWidth/5) { imagesBox.style.transform = 'translateX('+ (-index * screenWidth) + 'px)'; imagesBox.style.transition = "all 0.5s"; imagesBox.style.webkitTransition = "all 0.5s"; }else { if(distance > 0) { index--; imagesBox.style.transform = 'translateX('+ (-index * screenWidth) + 'px)'; imagesBox.style.transition = "all 0.5s"; imagesBox.style.webkitTransition = "all 0.5s"; }else { index++; imagesBox.style.transform = 'translateX('+ (-index * screenWidth) + 'px)'; imagesBox.style.transition = "all 0.5s"; imagesBox.style.webkitTransition = "all 0.5s"; } } } // 这里最好做一下重置 distance = 0; startX = 0; ismove = false; bannerTimer = setInterval(function() { index++; imagesBox.style.transform = 'translateX('+ -index * screenWidth + 'px)'; imagesBox.style.wewbkitTransform = 'translateX('+ -index * screenWidth + 'px)'; imagesBox.style.transition = 'all 0.5s'; imagesBox.style.webkitTransition = 'all 0.5s'; },3000); }); } var download = function() { var time = 2 * 3600; var spans = document.querySelector('.time').children; console.log(spans); var timer = setInterval(function(){ time--; var h = Math.floor(time / 3600); var m = Math.floor(time % 3600 / 60); var s = Math.floor(time % 60); spans[0].innerHTML = Math.floor(h/10); spans[1].innerHTML = Math.floor(h); spans[3].innerHTML = Math.floor(m/10); spans[4].innerHTML = Math.floor(m); spans[6].innerHTML = Math.floor(s/10); spans[7].innerHTML = Math.floor(s); },1000) }