<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.all{
width: 300px;
height:180px;
margin: 50px auto;
border:1px solid #ccc;
position: relative;
}
li{
list-style:none;
width:50px;
height:30px;
text-align: center;
line-height: 30px;
float: left;
font-size: 14px;
border:1px solid #ccc;
margin-top: 10px;
cursor:pointer;
}
ul{
height:35px;
width: 218px;
margin: 0 0 0 0;
display: flex;
justify-content: space-between;
}
.pic{
width: 218px;
height:120px;
margin: 15px auto;
position: relative;
cursor:pointer;
font-size: 0;
}
#click_1{
width: 18px;
height:27px;
position: absolute;
top:100px;
left:41px;
background:rgba(255,255,255,0.3);
cursor:pointer;
}
#click_1:hover {
background:rgba(255,255,255,0.6);
}
#click_2:hover {
background:rgba(255,255,255,0.6);
}
#click_2{
width: 18px;
height:27px;
position: absolute;
top:100px;
background:rgba(255,255,255,0.3);
right:41px;
cursor: pointer;
}
.pic {
display: block;
}
#pic1{
width: 18px;
height:27px;
display: block;
}
#pic2{
width: 18px;
height:27px;
display: block;
}
.cov{
background: rgba(255,255,255,0.3);
}
#change:after{
content:'';
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,0.2);
display: none;}
#change:hover:after{
display: block;}
.act{
color:red;
background-color: blue;
}
.pi>div{
display: none;
}
#reds{
display:block;
}
img{
display: none;
}
.img_1{
display: block;
}
</style>
</head>
<body>
<script>
window.onload=function () {
var choice=document.getElementsByTagName('li');
var imgh=document.getElementsByClassName('bian')[0].getElementsByTagName('img');
var imgh_1=document.getElementsByClassName('bian')[1].getElementsByTagName('img');
var imgh_2=document.getElementsByClassName('bian')[2].getElementsByTagName('img');
var imgh_3=document.getElementsByClassName('bian')[3].getElementsByTagName('img');
var huan_l=document.getElementById('pic1');
var huan_r=document.getElementById('pic2');
var mian=document.getElementsByClassName('bian');
num=0;
for(i=0;i<choice.length;i++){
choice[i].index=i;
choice[i].onmouseover=function () {
for(k=0;k<choice.length;k++){
choice[k].className='';
mian[k].id=''
}
this.className='act';
mian[this.index].id='reds'
}
}
huan_r.onclick=function () {
num=num+1;
for(i=0;i<imgh.length;i++){
imgh[i].className='';
imgh_1[i].className='';
imgh_2[i].className='';
imgh_3[i].className=''
}
if(num==imgh.length){
num=0
}
imgh[num].className='img_1';
imgh_1[num].className='img_1';
imgh_2[num].className='img_1';
imgh_3[num].className='img_1';
};
huan_l.onclick=function () {
num=num-1;
for(i=0;i<imgh.length;i++){
imgh[i].className='';
imgh_1[i].className='';
imgh_2[i].className='';
imgh_3[i].className=''
}
if(num<0){
num=imgh.length-1
}
imgh[num].className='img_1';
imgh_1[num].className='img_1';
imgh_2[num].className='img_1';
imgh_3[num].className='img_1';
}
}
</script>
<div class="all">
<ul>
<li class="act">热播</li>
<li>电视剧</li>
<li>电影</li>
<li>动漫</li>
</ul>
<div class="pic" id="change">
<div id="hua" class="pi">
<div class="bian" id="reds">
<img src="images/1.1.gif" alt="" class="img_1">
<img src="images/1.2.jpg" alt="">
<img src="images/1.3.jpg" alt="">
</div>
<div class="bian">
<img src="images/2.1.jpg" alt="" class="img_1">
<img src="images/2.2.jpg" alt="">
<img src="images/2.3.jpg" alt="">
</div>
<div class="bian">
<img src="images/3.1.jpg" alt="" class="img_1">
<img src="images/3.2.jpg" alt="">
<img src="images/3.3.jpg" alt="">
</div>
<div class="bian">
<img src="images/4.1.jpg" alt="" class="img_1">
<img src="images/4.2.jpg" alt="">
<img src="images/4.3.jpg" alt="">
</div>
</div>
<div class="cov"></div>
</div>
<div id="click_1"><img src="images/j2.png" alt="" id="pic1"></div>
<div id="click_2"> <img src="images/j1.png" alt="" id="pic2"></div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.all{
width: 300px;
height:180px;
margin: 50px auto;
border:1px solid #ccc;
position: relative;
}
li{
list-style:none;
width:50px;
height:30px;
text-align: center;
line-height: 30px;
float: left;
font-size: 14px;
border:1px solid #ccc;
margin-top: 10px;
cursor:pointer;
}
ul{
height:35px;
width: 218px;
margin: 0 0 0 0;
display: flex;
justify-content: space-between;
}
.pic{
width: 218px;
height:120px;
margin: 15px auto;
position: relative;
cursor:pointer;
font-size: 0;
}
#click_1{
width: 18px;
height:27px;
position: absolute;
top:100px;
left:41px;
background:rgba(255,255,255,0.3);
cursor:pointer;
}
#click_1:hover {
background:rgba(255,255,255,0.6);
}
#click_2:hover {
background:rgba(255,255,255,0.6);
}
#click_2{
width: 18px;
height:27px;
position: absolute;
top:100px;
background:rgba(255,255,255,0.3);
right:41px;
cursor: pointer;
}
.pic {
display: block;
}
#pic1{
width: 18px;
height:27px;
display: block;
}
#pic2{
width: 18px;
height:27px;
display: block;
}
.cov{
background: rgba(255,255,255,0.3);
}
#change:after{
content:'';
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,0.2);
display: none;}
#change:hover:after{
display: block;}
.act{
color:red;
background-color: blue;
}
.pi>div{
display: none;
}
#reds{
display:block;
}
img{
display: none;
}
.img_1{
display: block;
}
</style>
</head>
<body>
<script>
window.onload=function () {
var choice=document.getElementsByTagName('li');
var imgh=document.getElementsByClassName('bian')[0].getElementsByTagName('img');
var imgh_1=document.getElementsByClassName('bian')[1].getElementsByTagName('img');
var imgh_2=document.getElementsByClassName('bian')[2].getElementsByTagName('img');
var imgh_3=document.getElementsByClassName('bian')[3].getElementsByTagName('img');
var huan_l=document.getElementById('pic1');
var huan_r=document.getElementById('pic2');
var mian=document.getElementsByClassName('bian');
num=0;
for(i=0;i<choice.length;i++){
choice[i].index=i;
choice[i].onmouseover=function () {
for(k=0;k<choice.length;k++){
choice[k].className='';
mian[k].id=''
}
this.className='act';
mian[this.index].id='reds'
}
}
huan_r.onclick=function () {
num=num+1;
for(i=0;i<imgh.length;i++){
imgh[i].className='';
imgh_1[i].className='';
imgh_2[i].className='';
imgh_3[i].className=''
}
if(num==imgh.length){
num=0
}
imgh[num].className='img_1';
imgh_1[num].className='img_1';
imgh_2[num].className='img_1';
imgh_3[num].className='img_1';
};
huan_l.onclick=function () {
num=num-1;
for(i=0;i<imgh.length;i++){
imgh[i].className='';
imgh_1[i].className='';
imgh_2[i].className='';
imgh_3[i].className=''
}
if(num<0){
num=imgh.length-1
}
imgh[num].className='img_1';
imgh_1[num].className='img_1';
imgh_2[num].className='img_1';
imgh_3[num].className='img_1';
}
}
</script>
<div class="all">
<ul>
<li class="act">热播</li>
<li>电视剧</li>
<li>电影</li>
<li>动漫</li>
</ul>
<div class="pic" id="change">
<div id="hua" class="pi">
<div class="bian" id="reds">
<img src="images/1.1.gif" alt="" class="img_1">
<img src="images/1.2.jpg" alt="">
<img src="images/1.3.jpg" alt="">
</div>
<div class="bian">
<img src="images/2.1.jpg" alt="" class="img_1">
<img src="images/2.2.jpg" alt="">
<img src="images/2.3.jpg" alt="">
</div>
<div class="bian">
<img src="images/3.1.jpg" alt="" class="img_1">
<img src="images/3.2.jpg" alt="">
<img src="images/3.3.jpg" alt="">
</div>
<div class="bian">
<img src="images/4.1.jpg" alt="" class="img_1">
<img src="images/4.2.jpg" alt="">
<img src="images/4.3.jpg" alt="">
</div>
</div>
<div class="cov"></div>
</div>
<div id="click_1"><img src="images/j2.png" alt="" id="pic1"></div>
<div id="click_2"> <img src="images/j1.png" alt="" id="pic2"></div>
</div>
</body>
</html>