倒计时

html
<!-- 倒计时 --><div class="time"><p>10:00场</p><img src="./img/lightning.png"><p>距离结束还有</p><div class="time1"><div id="hour"></div><span>:</span><div id="minute"></div><span>:</span><div id="second"></div></div></div>

css
/* 倒计时 */
.time{width:200px;height:300px;background:#f1eded;border-top:1px solid red;
}
.time p:nth-of-type(1){color: red;color:16px;text-align: center;margin-top:50px;
}
.time img{margin-left:80px;margin-top:30px;width:30px;height:45px;
}
.time p:nth-of-type(2){color:#6f6d6d;font-size:14px;text-align: center;margin-top:30px;
}
.time1 {display: flex;width:160px;margin: auto;align-items: center;margin-top:30px;
}
.time1 div {width: 40px;height: 40px;background:#605751;display: flex;justify-content: center;align-items: center;color: #fff;
}
.time1 span{font-size:26px; margin-left:5px;margin-right:5px;
}

js
// 倒计时
var s = 86405 // 总秒数
var m = 60 // 分秒数
var h = 60 * 60 // 时秒数
var d = 60 * 60 * 24 // 天秒数
setInterval(function () {s--var ld = parseInt(s / d) // 总天数var lh = parseInt(s % d / h) // 不足一天的小时数lh < 10 ? lh = '0' + lh : ''var lm = parseInt(s % h / m) // 不足一小时的分钟数lm < 10 ? lm = '0' + lm : ''var ls = parseInt(s % m) // 不足一分的秒数ls < 10 ? ls = '0' + ls : ''document.getElementById('hour').innerHTML = lh + '时'document.getElementById('minute').innerHTML = lm + '分'document.getElementById('second').innerHTML = ls + '秒'
}, 1000)

轮播图

效果图：
第一种

第二种

两种轮播图 js共用一个
第一种轮播图

html
<!-- 轮播图 -->
<div class="lunbo"><ul class="img"><li><img src="img/1.png"></li><li><img src="img/index3.png"></li><li><img src="img/index4.png"></li><li><img src="img/index2.png"></li><li><img src="img/2.png"></li><li><img src="img/3.png"></li><li><img src="img/4.png"></li><li><img src="img/5.png"></li><li><img src="img/banner2.png"></li><li><img src="img/index8.png"></li></ul><ul class="num"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><div class="btn_left button"> ← </div><div class="btn_right button"> → </div>
</div>

css
/* 轮播图 */
.lunbo {width: 1000px;height: 410px;position: relative;
}.lunbo ul img {width: 1000px;height: 410px;position: absolute;top: 0px;left: 0px;
}
.num {position: absolute;bottom: 10px;font-size: 0px;width: 100%;text-align: center;
}
.num li {width: 20px;height: 20px;background-color: gray;border-radius: 60%;text-align: center;line-height: 20px;display: inline-block;font-size: 10px;margin: 3px;cursor: pointer;
}
.button {width: 20px;height: 60px;line-height: 60px;text-align: center;background-color: gray;opacity: 0.6;position: absolute;top: 50%;margin-top: -30px;font-size: 20px;font-weight: bolder;display: none;cursor: pointer;
}
.btn_right {position: absolute;right: 0px;
}
.lunbo:hover .button{display:block;
}
.lunbo .num li.current{background-color:red;
}

第二种轮播图

html
<!-- 轮播2 --><div class="crosswise"><div class="commodity"><div style="border-top: 1px solid #ffac13"> <img src="img/lunbo2/paper.png"><p>日常元素抽纸 青春版 24包/箱</p><p>精选原生竹浆，健康环保</p></div><div style="border-top:1px solid #83c44e"><img src="img/lunbo2/water.png"><p>小米净水器600G 白色</p><p>600加仑通量，流速更快</p></div><div style="border-top:1px solid #2196f3"><img src="img/lunbo2/conditioner.png"><p>定频|米家空调 大1匹</p><p>出众静音，快速制冷热</p></div><div style="border-top:1px solid #e53935"><img src="img/lunbo2/electric.png"><p>米家IH电饭煲4L 白色</p><p>多才多艺的智能电饭煲</p></div></div><div class="commodity"><div style="border-top: 1px solid #00c0a5"> <img src="img/lunbo2/fullAutomatic.jpg"><p>Redmi全自动波轮洗衣机1S 8kg 灰色</p><p>小身材大容量，可预约</p></div><div style="border-top:1px solid #ffac13"><img src="img/lunbo2/Redmi.jpg"><p>RedmiBook 14 Ⅱ R7 16G 512G 银色</p><p>全面屏高性能轻薄本</p></div><div style="border-top:1px solid #83c44e"><img src="img/lunbo2/robot.png"><p>米家扫拖机器人 黑色</p><p>扫得干净，拖得彻底</p></div><div style="border-top:1px solid #2196f3"><img src="img/lunbo2/towel.png"><p>最生活毛巾·Air（10条装） 白色+素蓝</p><p>给生活一条好毛巾</p></div></div><div class="commodity"><div style="border-top: 1px solid #e53935"> <img src="img/lunbo2/electric.jpg"><p>圈厨多用途电热锅 白色</p><p>煎烤烙炖蒸焖涮，样样精通</p></div><div style="border-top:1px solid #00c0a5"><img src="img/lunbo2/refrigerator.jpg"><p>米家两门冰箱 160L 银色</p><p>小巧能装，速冻养鲜</p></div><div style="border-top:1px solid #ffac13"><img src="img/lunbo2/performance.jpg"><p>RedmiBook 16 R5 16G 512G 灰色</p><p>超震撼全面屏，超轻薄性能本</p></div><div style="border-top:1px solid #83c44e"><img src="img/lunbo2/cleaners.jpg"><p>米家手持无线吸尘器1C 白色</p><p>吸力续航双强劲，清洁小怪兽</p></div></div><div class="commodity"><div style="border-top: 1px solid #2196f3"> <img src="img/lunbo2/mosquito.jpg"><p>米家驱蚊器 智能版（3个装） 白色</p><p>手机定时开关机，智能驱蚊更省心</p></div><div style="border-top:1px solid #e53935"><img src="img/lunbo2/sound.jpg"><p>Redmi小爱音箱 Play 蓝色</p><p>大音量，好声音</p></div><div style="border-top:1px solid #00c0a5"><img src="img/lunbo2/television.png"><p>小米曲面显示器 34英寸 黑</p><p>超宽大环绕显示屏</p></div><div style="border-top: 1px solid #ffac13"><img src="img/lunbo2/cleaner.png"><p>米家空气净化器Pro</p><p>大空间，快循环</p></div></div></div>

js
// 轮播图
//初始时，索引1背景为红色，并显示第一张图片，
$(".num li").first().addClass("current");           
$(".img li").first().show().siblings().hide();		
$(".commodity").first().show().siblings().hide();   第二种轮播图 
//鼠标over在索引值上时，切换图片，并将当前索引复制给全局变量i，便于接下来从当前图片开始轮播
$(".num li").mouseover(function() {											$(this).addClass("current").siblings().removeClass("current");var index = $(this).index();$(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);i = index;
});	
$(".commodity").mouseover(function() {										第二种轮播图$(this).addClass("current").siblings().removeClass("current");var index = $(this).index();$(".commodity").eq(index).fadeIn(1000).siblings().fadeOut(1000);i = index;
});
i = 0; //全局变量，记录当前轮播图的索引
//播放下一张图片的函数
function move() {i++;if (i > 9) {i = 0;}$(".num li").eq(i).addClass("current").siblings().removeClass("current");$(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);$(".commodity").eq(i).fadeIn(1000).siblings().fadeOut(1000);					第二种轮播图
}
//每2s播放下一张图片
var time = setInterval(move, 2000);
//鼠标放在.outer区域时，轮播停止；离开时，轮播继续
$(".outer").hover(function() {clearInterval(time)
}, function() {time = setInterval(move, 2000);
});
//点击向右翻页
$(".btn_right").click(function() {move();
});
$(".btn_right1").click(function() {												第二种轮播图move();
});
//点击向左翻页时，先将i-2,再向右翻页
$(".btn_left").click(function() {i = i - 2;if (i < -1) {i = 2;}move();
})
$(".btn_left1").click(function() {												第二种轮播图i = i - 2;if (i < -1) {i = 2;}move();
})

就这样啦，下页更新返回顶部、放大镜