<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bass.css"/>
<style type="text/css">
.jd_layout {
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
background-color: #DDDDDD;
}
.jd_search {
width: 100%;
max-width:640px;
height: 40px;
position: fixed;
background: rgba(233,35,34,0);
z-index: 999;
}
.jd_logo {
width: 56px;
height: 30px;
position: absolute;
left: 10px;
top: 5px;
font-size: 20px;
border-radius: 10px;
padding-left: 5px;
}
.jd_login{
width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
line-height: 40px;
color: #fff;
}
.jd_searchBox{
width: 100%;
height: 100%;
padding-left:76px;
padding-right: 50px;
box-shadow: 1px 1px 1px #ddd;
}
.jd_searchBox > input{
width: 100%;
height: 30px;
margin-top: 5px;
border-radius: 15px;
padding-left: 30px;
}
.jd_banner {
width: 100%;
overflow: hidden;
position: relative;
}
.jd_bannerImg {
/* width: 400%; */
position: relative;
/* left: -100%; */
}
.jd_bannerImg > li {
/* width: 25%; */
float:left;
}
.jd_bannerImg > li img {
width: 100%;
display: block;
}
.jd_bannerIndicator {
width: 62px;
height: 10px;
position: absolute;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
}
.jd_bannerIndicator>li{
width: 6px;
height: 6px;
border-radius: 3px;
border: 1px solid #fff;
float:left;
margin-left: 10px;
}
.jd_bannerIndicator > li:first-child {
margin-left: 0;
}
.jd_bannerIndicator > li.active {
background-color: #fff;
}
.jd_nav{
width: 100%;
padding: 10px 0;
background-color: #fff;
}
.jd_nav li {
width: 25%;
float: left;
text-align: center;
margin-top: 5px;
overflow: hidden;
}
.jd_nav li img {
width: 40px;
}
.jd_nav li p{
line-height: 25px;
}
.jd_product {
width: 100%;
}
.jd_productBox{
width: 100%;
margin-top: 10px;
background-color: #fff;
box-shadow: 1px 1px 1px #ccc;
}
.jd_productBox > .jd_pTip {
width: 100%;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ccc;
color: #666;
}
.jd_productBox > .jd_pTip > h3 {
position: relative;
padding-left: 30px;
}
.jd_productBox > .jd_pTip > h3::before {
content: "";
position: absolute;
width: 3px;
height: 12px;
background-color: #e92322;
left: 20px;
top: 9px;
}
.a_50 {
width: 50%;
display: block;
}
.a_50 > img{
width: 100%;
display: block;
}
.b_left {
border-left: 1px solid #ccc;
}
.b_bottom {
border-bottom: 1px solid #ccc;
}
.b_right {
border-right: 1px solid #ccc;
}
.jd_sk{}
.jd_sk > .jd_pTip .jd_sk_text {
color: #e92323;
}
.jd_sk > .jd_pTip .jd_sk_time span{
width: 13px;
height: 18px;
display: inline-block;
line-height: 18px;
color:#fff;
background-color: #000;
text-align: center;
}
.jd_sk > .jd_pTip .jd_sk_time > span:nth-of-type(3n) {
color: #000;
background-color: transparent;
width: 8px;
}
.jd_sk .jd_pContent{
padding: 20px;
}
.jd_sk .jd_pContent > ul {
width: 100%;
}
.jd_sk .jd_pContent > ul > li {
width: 33.33%;
float: left;
text-align: center;
}
.jd_sk .jd_pContent > ul > li img {
width: 60%;
display: inline-block;
}
</style>
</head>
<body>
<div class="jd_layout">
<div class="jd_search">
<a href="javascript:;" class=jd_logo>京东</a>
<form action="" method="post" class="jd_searchBox">
<input type="text" placeholder="请输入商品名称" />
</form>
<a href="javascript:;" class="jd_login">登录</a></div>
<div class="jd_banner">
<ul class="jd_bannerImg clearfix">
<li>
<a href="javascript:;">
<img src="img/l2.jpg" alt="" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/l3.jpg" alt="" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/l5.jpg" alt="" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/l6.jpg" alt="" />
</a>
</li>
</ul>
<ul class="jd_bannerIndicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="jd_nav">
<ul class="clearfix">
<li>
<a href="">
<img src="img/lun2.JPG" alt="" />
<p>商品分类</p>
</a>
</li>
<li>
<a href="">
<img src="img/lun2.JPG" alt="" />
<p>商品分类</p>
</a>
</li>
<li>
<a href="">
<img src="img/lun2.JPG" alt="" />
<p>商品分类</p>
</a>
</li>
<li>
<a href="">
<img src="img/lun2.JPG" alt="" />
<p>商品分类</p>
</a>
</li>
<li>
<a href="">
<img src="img/lun2.JPG" alt="" />
<p>商品分类</p>
</a>
</li>
<li>
<a href="">
<img src="img/lun2.JPG" alt="" />
<p>商品分类</p>
</a>
</li>
<li>
<a href="">
<img src="img/lun2.JPG" alt="" />
<p>商品分类</p>
</a>
</li>
<li>
<a href="">
<img src="img/lun2.JPG" alt="" />
<p>商品分类</p>
</a>
</li>
</ul>
</div>
<div class="jd_product">
<div class="jd_productBox clearfix jd_sk">
<div class="jd_pTip">
<div class="jd_left .jd_left">
<span class="f_left m_left10 jd_sk_text">掌上秒杀</span>
<div class="jd_sk_time f_left m_left10">
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0</span>
</div>
</div>
<div class="m_right10 f_right">
更多秒杀...
</div>
</div>
<div class="jd_pContent clearfix">
<ul>
<li>
<a href="javascript:;">
<img src="img/new1.png" alt="" />
</a>
<p>¥10.00</p>
<p>¥20.00</p>
</li>
<li>
<a href="javascript:;">
<img src="img/new1.png" alt="" />
</a>
<p>¥10.00</p>
<p>¥20.00</p>
</li>
<li>
<a href="javascript:;">
<img src="img/new1.png" alt="" />
</a>
<p>¥10.00</p>
<p>¥20.00</p>
</li>
</ul>
</div>
</div>
<div class="jd_productBox clearfix">
<div class="jd_pTip">
<h3>京东超市</h3>
</div>
<div class="jd_pContent">
<a href="javascript:;" class="a_50 f_left ">
<img src="img/des.jpg" alt="" />
</a>
<a href="javascript:;" class="a_50 f_left b_left b_bottom">
<img src="img/de.jpg" alt="" />
</a>
<a href="javascript:;" class="a_50 f_left b_left">
<img src="img/de.jpg" alt="" />
</a>
</div>
</div>
<div class="jd_productBox clearfix">
<div class="jd_pTip">
<h3>京东超市</h3>
</div>
<div class="jd_pContent">
<a href="javascript:;" class="a_50 f_right ">
<img src="img/des.jpg" alt="" />
</a>
<a href="javascript:;" class="a_50 f_left b_left b_bottom">
<img src="img/de.jpg" alt="" />
</a>
<a href="javascript:;" class="a_50 f_left b_left">
<img src="img/de.jpg" alt="" />
</a>
</div>
</div>
<div class="jd_productBox clearfix">
<div class="jd_pTip">
<h3>京东超市</h3>
</div>
<div class="jd_pContent">
<a href="javascript:;" class="a_50 f_left ">
<img src="img/des.jpg" alt="" />
</a>
<a href="javascript:;" class="a_50 f_left b_left b_bottom">
<img src="img/de.jpg" alt="" />
</a>
<a href="javascript:;" class="a_50 f_left b_left">
<img src="img/de.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
<script>
window.onload = function() {
searchEffect();
timeBack();
bannerEffect();
}
function searchEffect(){
/*头部搜索块的js效果*/
/*1.获取当前banner的高度*/
var banner = document.querySelector(".jd_banner");
var search = document.querySelector(".jd_search");
var bannerHeight = banner.offsetHeight;
/*2.获取当前屏幕滚动时,banner滚动处屏幕的距离*/
window.onscroll = function(){
var offsetTop = document.documentElement.scrollTop;
/*3.计算比例值,获取透明度设置背景颜色的样式*/
var opacity = 0;
if(offsetTop < bannerHeight) {
opacity = offsetTop/bannerHeight;
search.style.backgroundColor="rgba(233,35,34,"+opacity+")";
}
}
}
function timeBack(){
var spans = document.querySelector(".jd_sk_time").querySelectorAll("span");
var totalTime = 40000;
var timerId = setInterval(function(){
totalTime--;
if(totalTime < 0){
clearInterval(timerId);
return;
}
var hour = Math.floor(totalTime/3600);
var minute = Math.floor(totalTime%3600/60);
var second = Math.floor(totalTime%60);
spans[0].innerHTML = Math.floor(hour/10);
spans[1].innerHTML = Math.floor(hour%10);
spans[3].innerHTML = Math.floor(minute/10);
spans[4].innerHTML = Math.floor(minute%10);
spans[6].innerHTML = Math.floor(second/10);
spans[7].innerHTML = Math.floor(second%10);
},1000);
}
function bannerEffect(){
var index = 1;
var banner = document.querySelector(".jd_banner");
var imgBox = banner.querySelector("ul:first-child");
var first = imgBox.querySelector("li:first-child");
var last = imgBox.querySelector("li:last-child");
imgBox.appendChild(first.cloneNode(true));
imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
var lis = imgBox.querySelectorAll("li");
var count = lis.length;
var bannerWidth = banner.offsetWidth;
imgBox.style.width = count*bannerWidth+"px";
for(var i = 0; i<lis.length;i++){
lis[i].style.width = bannerWidth + "px";
}
var index = 1;
imgBox.style.left = - bannerWidth + "px";
//屏幕尺寸改变
window.onresize = function(){
bannerWidth = banner.offsetWidth;
imgBox.style.width = count*bannerWidth+"px";
for(var i = 0; i<lis.length;i++){
lis[i].style.width = bannerWidth + "px";
}
imgBox.style.left = (- bannerWidth*index) + "px";
}
var setIndicator = function(index){
var indicators = banner.querySelector("ul:last-of-type").querySelectorAll("li");
for(var i=0;i<indicators.length;i++){
indicators[i].classList.remove("active");
}
indicators[index-1].classList.add("active");
}
//实现轮播
var timeId;
var startTime = function(){
timeId = setInterval(function(){
index++;
imgBox.style.transition = "left 0.5s ease";
imgBox.style.left = (-index*bannerWidth) + "px";
},1000);
};
startTime();
var startX,moveX,distanceX;
var isEnd = true;
imgBox.addEventListener("touchstart",function(e){
clearInterval(timeId);
startX = e.targetTouches[0].clientX;
});
imgBox.addEventListener("touchmove",function(e){
moveX = e.targetTouches[0].clientX;
distanceX = moveX - startX;
imgBox.style.transition = "none";
//设置偏移
imgBox.style.left = (-index*bannerWidth + distanceX )+ "px";
}) ;
imgBox.addEventListener("touchend",function(e){
if(Math.abs(distanceX)>100){
if(distanceX>0){
index--;
}else{
index++;
}
imgBox.style.transition = "left 0.5s ease-in-out";
imgBox.style.left = -index*bannerWidth+"px";
}else if(Math.abs(distanceX>0)){
imgBox.style.transition="left 0.5s ease-in-out";
imgBox.style.left = index*bannerWidth+"px";
startX = 0;
moveX = 0;
distanceX = 0;
}
});
imgBox.addEventListener("webkitTransitionEnd",function(){
if(index==count-1){
index=1;
imgBox.style.transition="none";
imgBox.style.left=-index*bannerWidth+"px";
}
else if(index==0){
index=count-2;
imgBox.style.transition="none";
imgBox.style.left=-index*bannerWidth+"px";
}
setIndicator(index);
setTimeout(function(){
clearInterval(timeId);
startTime();},100);
});
}
</script>
</body>
</html>
移动端京东首页
最新推荐文章于 2023-05-30 01:15:39 发布
1246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
