<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<style>
*{margin: 0px;padding: 0px;}
ul li{list-style: none;}
a{color: #ddd;text-decoration: none;}
.box{width: 1310px;height: 520px;margin: 0px auto;position: relative;}
.box ul li img{width: 1310px;height:520px;margin: 0 auto;}
.nav_bar{position: absolute;top: 10px;right: 20px;width: 276px;background: rgba(0,0,0,0.5);}
.nav_bar li{padding: 11px 20px;cursor: pointer;}
.show{display: none;background: #fff;width:190px;padding: 10px 15px;border-radius: 4px;}
.title{font-size: 20px;color: #ff6428;}
.txt{color: #666;}
li.active a{display: none;}
li.active .show{display: block;}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#"><img src="img/1.jpg" id="img"/></a>
</li>
</ul>
<div class="nav_bar">
<ul>
<li class="active">
<a href="#">利刃出击 杨栎演绎热血军旅</a>
<div class="show">
<div class="title">利刃出击</div>
<div class="txt">杨栎演绎热血军旅</div>
</div>
</li>
<li>
<a href="#">以你为名的青春:甜蜜来袭</a>
<div class="show">
<div class="title">以你为名的青春</div>
<div class="txt">甜蜜来袭</div>
</div>
</li>
<li>
<a href="#">热血街舞团:剧情升级版本</a>
<div class="show">
<div class="title">热血街舞团</div>
<div class="txt">剧情升级版本</div>
</div>
</li>
<li>
<a href="#">偶像练习生:范政政银发撩人</a>
<div class="show">
<div class="title">偶像练习生</div>
<div class="txt">范政政银发撩人</div>
</div>
</li>
<li>
<a href="#">人大会议闭幕,***发表讲话</a>
<div class="show">
<div class="title">人大会议闭幕</div>
<div class="txt">***发表讲话</div>
</div>
</li>
<li>
<a href="#">利刃出击 杨栎演绎热血军旅</a>
<div class="show">
<div class="title">利刃出击</div>
<div class="txt">杨栎演绎热血军旅</div>
</div>
</li>
</ul>
</div>
</div>
<script>
$(".nav_bar ul li").attr("bimg",function(index){
return "img/"+(index+1)+".jpg"
})
$(".nav_bar ul li").mouseover(function(){
var bimg= $(this).attr("bimg")
$(this).addClass("active").siblings("li").removeClass("active")
$("#img").attr("src",bimg)
})
</script>
</body>
</html>
相关文章
- 07-22Mac如何下载爱奇艺、腾讯视频、B站的在线视频？Downie超简单下载教程
- 07-22爱奇艺2017秋招笔试（C++智能设备方向）
- 07-22爱奇艺技术分享：轻松诙谐，讲解视频编解码技术的过去，android项目开发实战入门明日科技
- 07-22网易资深安卓架构师：有了这些中高端面试专题-大厂还会远吗？含爱奇艺，小米，腾讯，阿里
- 07-22爱奇艺VR获数亿元B轮融资，中国VR行业迎来特殊时期
- 07-22基于Apache Flink的爱奇艺实时计算平台建设实践
- 07-22爱奇艺后台面经AVA
- 07-22看完我工资从12K变成了20K！如何化身BAT面试收割机？含爱奇艺，小米，腾讯，阿里
- 07-22爱奇艺广告技术沙龙---广告召回
- 07-22Android开发面试题！GitHub标星1w的安卓架构师必备技能，含爱奇艺，小米，腾讯，阿里