<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*外部下载字体*/
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*{
margin:0px;
padding:0px;
}
ul{
list-style-type:none;
}
a{
text-decoration:none;
}
body{
/* background-color:rgba(128, 128, 128, 0.089); */
background-color:#fff;
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
.fl{
float:left;
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
div.content{
cursor:pointer;
position:relative;
width:1226px;
height:460px;
margin:0 auto;
background-color:red;;
}
div.content>.contentLeft{
/* opacity:0; */
position:absolute;
width:234px;
height:420px;
padding:20px 0px;
color: #fff;
background-color:rgba(105,101,101,.6);
position:absolute;
z-index:999;
}
div.content>.contentLeft>ul{
width:234px;
height:420px;
/* padding:20px 0px; */
/* padding-top:20px; */
}
div.content>.contentLeft>ul>li{
/* position:relative; */
width:234px;
height:42px;
line-height:42px;
}
div.content>.contentLeft>ul>li::after{
content:">";
display:inline-block;
width:16px;
height:16px;
font-size:20px;
position:absolute;
right:20px;
color:#e0e0e0
}
div.content>.contentLeft>ul>li:hover{
background-color:#ff6700;
}
div.content>.contentLeft>ul>li>a{
color:#fff;
width:204px;
height:42px;
padding-left:30px;
}
div.content>.contentRight{
/* position: absolute; */
width:1226px;
height:460px;
background-color:lightgoldenrodyellow
}
div.content>.contentRight>img{
position: absolute;
float:left;
width:1226px;
}
div.content>.contentRight>ul{
position:absolute;
bottom: 0px;
right:30px;
/* position:relative; */
width:90px;
height:50px;
/* background-color: lightpink; */
}
div.content>.contentRight>ul>li{
/* position:absolute;
bottom:0px; */
/* margin-top:40px; */
float:left;
width:10px;
height:10px;
border-radius:50%;
margin: 17px 4px 0;
box-sizing: border-box;
border: 2px solid#757575;
background: rgba(0,0,0,.4);
}
div.content>.contentRight>ul>li:hover{
background-color:#c0c0c0;
}
div.contentRF{
overflow:hidden;
display:none;
width:992px;
height:460px;
background-color:#fff;
position:absolute;
top:0px;
right:0px;
box-sizing: border-box;
border:1px solid #e0e0e0;
}
div.contentRF>ul{
width:992px;
height:460px;
}
div.contentRF>ul>li{
float:left;
width:247.5px;
height:76px;
}
div.contentRF>ul>li:hover{
color:#ff6700;
}
div.contentRF>ul>li>img{
margin-left:25px;
margin-top:22px;
}
div.contentRF>ul>li>span{
vertical-align:15px;
margin-left:5px;
}
</style>
<head>
<body>
<div class = "content">
<div class="contentLeft">
<ul>
<li class = "clearfix" onmousemove="onmouseover2()" onmouseout="onmouseout2()"><a href="#">手机 电话卡</a></li>
<li class = "clearfix" onmousemove="onmouseover5()" onmouseout="onmouseout2()"><a href="#">电视 盒子</a></li>
<li class = "clearfix" onmousemove="onmouseover3()" onmouseout="onmouseout2()"><a href="#">笔记本 显示器</a></li>
<li class = "clearfix" onmousemove="onmouseover4()" onmouseout="onmouseout2()"><a href="#">家电 插线板</a></li>
<li class = "clearfix" onmousemove="onmouseover5()" onmouseout="onmouseout2()"><a href="#">出行 穿戴</a></li>
<li class = "clearfix" onmousemove="onmouseover2()" onmouseout="onmouseout2()"><a href="#">智能 路由器</a></li>
<li class = "clearfix" onmousemove="onmouseover5()" onmouseout="onmouseout2()"><a href="#">电源 配件</a></li>
<li class = "clearfix" onmousemove="onmouseover3()" onmouseout="onmouseout2()"><a href="#">健康 儿童</a></li>
<li class = "clearfix" onmousemove="onmouseover2()" onmouseout="onmouseout2()"><a href="#">耳机 音箱</a></li>
<li class = "clearfix" onmousemove="onmouseover4()" onmouseout="onmouseout2()"><a href="#">生活 箱包</a></li>
</ul>
</div>
<div class="contentRight clearfix" >
<img class = "carousel" id = "imagekongzhi" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c7fd00fa846cefaaa73572ea55832854.jpg?w=2452&h=920" alt="">
<!-- <img class = "carousel" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85fe83512254832000635fb15f048df5.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
<img class = "carousel" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aebcb8f7d8c6ddaa754bfbb701a38cbf.jpeg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
<img class = "carousel" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e023dd94c146d0f27f7ae8e98213abff.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
<img class = "carousel" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0f5c49925f3a7d5157b8ac7f4f66b34b.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""> -->
<ul class = "clearfix">
<li id = "circle" onmousemove="circle()" onmouseout="circleOut()" onclick="circleOver1()"></li>
<li id = "circle" onclick="circleOver2()"></li>
<li id = "circle" onclick="circleOver3()"></li>
<li id = "circle" onclick="circleOver4()"></li>
<li id = "circle" onclick="circleOver5()"></li>
</ul>
</div>
<div class="contentRF" id = "contentHover1">
<ul class = "clearfix">
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
<span>小米10S</span>
</li>
</ul>
</div>
</div>
<script type = "text/javascript">
//封装选择ID
// window.οnlοad=function(){
function $(id){
return document.getElementById(id);
}
//鼠标进
function onmouseover2(){
// this.style.display="none";
$("contentHover1").style.display="block";
$("contentHover1").style.width = "992px"
$("contentHover1").style.height = "460px"
// document.getElementById("contentHover1").style.display = "block";
// this.style.boxShadow=" 0 2px 2px gray";
}
function onmouseover3(){
$("contentHover1").style.display="block";
$("contentHover1").style.width = "494px"
$("contentHover1").style.height = "460px"
}
function onmouseover4(){
$("contentHover1").style.display="block";
$("contentHover1").style.width = "992px"
$("contentHover1").style.height = "148px"
}
function onmouseover5(){
$("contentHover1").style.display="block";
$("contentHover1").style.width = "494px"
$("contentHover1").style.height = "148px"
}
function circle(){
$("circle").style.backgroundColor = "#e0e0e0";
}
function circleOut(){
$("circle").style.backgroundColor = "rgba(0,0,0,.4)";
}
function circleOver1(){
$("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c7fd00fa846cefaaa73572ea55832854.jpg?w=2452&h=920";
}
function circleOver2(){
$("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85fe83512254832000635fb15f048df5.jpg?thumb=1&w=1226&h=460&f=webp&q=90";
}
function circleOver3(){
$("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aebcb8f7d8c6ddaa754bfbb701a38cbf.jpeg?thumb=1&w=1226&h=460&f=webp&q=90";
}
function circleOver4(){
$("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e023dd94c146d0f27f7ae8e98213abff.jpg?thumb=1&w=1226&h=460&f=webp&q=90";
}
function circleOver5(){
$("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0f5c49925f3a7d5157b8ac7f4f66b34b.jpg?thumb=1&w=1226&h=460&f=webp&q=90";
}
//鼠标出
function onmouseout2(){
$("contentHover1").style.display="none";
$("contentHover1").style.width = "992px"
$("contentHover1").style.height = "460px"
// this.style.boxShadow='none';
}
// document.getElementsByClassName("carousel")[4].style.zIndex = 5;
// document.getElementsByClassName("carousel")[3].style.zIndex = 5;
// document.getElementsByClassName("carousel")[2].style.zIndex = 5;
// document.getElementsByClassName("carousel")[1].style.zIndex = 5;
// document.getElementsByClassName("carousel")[0].style.zIndex = 5;
// setInterval(function (){
// // for(var i = 5; i > 0; i--){
// // document.getElementsByClassName("carousel")[4].style.zIndex;
// // for(var i = 0; i < 5; i++){
// for(var j = 0; j < 5; j++){
// document.getElementsByClassName("carousel")[4].style.zIndex+=j;
// document.getElementsByClassName("carousel")[3].style.zIndex+=j;
// document.getElementsByClassName("carousel")[2].style.zIndex+=j;
// document.getElementsByClassName("carousel")[1].style.zIndex+=j;
// document.getElementsByClassName("carousel")[0].style.zIndex+=j;
// }
// // }
// // }
// }, 1000);
</script>
</body>
</html>
渡一春季班第五天
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/114702215
今日推荐
周排行