HTML
<div class="box" id="box">
<ul class="top" id="top">
<li class="fl">专题</li>
<li class="fl">视频</li>
</ul>
<div class="clearFix" id="cont">
<img class="fl" src=""/>
<ul class="fl"></ul>
</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearFix:after{
display: block;
clear: both;
content: "";
}
li{
list-style: none;
}
.box{
width: 500px;
margin: 50px auto 0;
}
.top{
width: 100%;
height: 50px;
}
.top li{
width: 100px;
height: 49px;
line-height: 50px;
text-align: center;
border: 1px solid #c9c7c9;
background: #f8f6f8;
color: #3a383a;
border-bottom: none;
}
.top li:nth-of-type(1){
border-right: none;
}
.top li:nth-of-type(2){
border-left: 1px solid #edeced;
}
.top .act{
background: #fff;
height: 50px;
}
#cont{
padding: 10px 0;
border: 1px solid #c9c7c9;
}
#cont img{
width: 250px;
height: 152px;
border: 1px solid #c9c7c9;
margin-left: 20px;
}
#cont li{
width: 200px;
height: 50px;
margin-left: 10px;
background: #dfe6e7;
text-align: center;
line-height: 50px;
margin-bottom: 2px;
cursor: pointer;
}
#cont .active{
background: #646264;
border: 2px solid #898889;
border-left: none;
border-right: none;
color: #fff;
margin-bottom: 0;
}
JS
var imgArry=[
["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510307985802&di=679784c92f883bd8fda0214c00bc6e89&imgtype=0&src=http%3A%2F%2Fww1.sinaimg.cn%2Flarge%2Fd75e3906jw1ejgm0ph1vqj20t50jtwg1.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510308021938&di=ad40d39e8a4ba84f4be3b5c60afa60a1&imgtype=0&src=http%3A%2F%2Fww1.sinaimg.cn%2Flarge%2Fd75e3906jw1eet1l6nzbzj20u40jvdjm.jpg",
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3330510089,2295099251&fm=27&gp=0.jpg"],
["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510308059233&di=b90a1d090263593aa999df78380d2f24&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7a899e510fb30f240f5749e9c295d143ac4b030e.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510294831731&di=4f24480dd0db1b935b204d039ea714bd&imgtype=0&src=http%3A%2F%2Frescdn.qqmail.com%2Fdyimg%2F20140316%2F749D81D568F6.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510308099207&di=15f437a9a740049988e631576dbfb8ef&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ffaedab64034f78f0f21e481c73310a55b2191cc3.jpg"]
];
var txtArry=[["专题一","专题二","专题三"],["视频一","视频二","视频三"]];
var oBox=document.getElementById("box");
var oTop=document.getElementById("top");
var topLi=oTop.getElementsByTagName("li");
var oCont=document.getElementById("cont");
var oImg=document.getElementsByTagName("img")[0];
var oUl=oCont.getElementsByTagName("ul")[0];
var contLi=oCont.getElementsByTagName("li");
var n=imgArry[0].length;
var a=0;
var b=0;
var timer=null;
//页面初始化
fn(0);
//点击标题切换内容
for (var i=0;i<topLi.length;i++) {
topLi[i].index=i;
topLi[i].οnclick=function(){
a=this.index;
fn(this.index);
fn1();
}
}
//点击右侧列表切换图片
fn1();
//自动切换
move();
//清除定时器
oBox.οnmοuseοver=function(){
clearInterval(timer);
fn1();
}
oBox.οnmοuseοut=function(){
move();
}
//封装函数
function fn(num){
for (var i=0;i<topLi.length;i++) {
topLi[i].className="fl";
}
topLi[num].className="fl act";
oImg.src=imgArry[num][0];
oUl.innerHTML=null;
for (var i=0;i<n;i++) {
oUl.innerHTML+="<li>"+txtArry[num][i]+"</li>";
}
contLi[0].className="active";
}
function fn1(){
for (var i=0;i<contLi.length;i++) {
contLi[i].index=i;
contLi[i].οnclick=function(){
if(a==0){
b=this.index;
}else{
b=this.index+2;
}
fn11(this.index);
}
}
}
function fn11(num1){
for (var i=0;i<contLi.length;i++) {
contLi[i].className="";
}
contLi[num1].className="active";
oImg.src=imgArry[a][num1];
}
function move(){
timer=setInterval(function(){
b++;
if(b<n){
a=0;
fn(a);
fn11(b);
}else{
a=1;
fn(a);
fn11(b%n);
if(b==5){
b=-1;
}
}
},2000)
}