jQuery-爱奇艺图片切换
<!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>
最新文章
- spring mvc 4.3.2 + mybatis 3.4.1 + mysql 5.7.14 +shiro 幼儿园收费系统 之 登录
- 见证历史 -- 2013 NBA 热火夺冠之路有感
- ajax教程完整版
- 解决:Could not parse response code.Server Reply: SSH-2.0-OpenSSH_5.3
- MapReduce: 一种简化的大规模集群数据处理法
- ATT 解锁手机
- 重新想象 Windows 8.1 Store Apps (84) - 图像处理的新特性, Share Contract 的新特性
- Linux 之创建工作目录-mkdir
- web处理jsp文件的三个阶段
- python 最长公共子序列
- js 格式化数字
- Spring注释@Qualifier
- Bug :”解压压缩文件失败： cpio; 在头中不存在归档“
- HDU 5348 MZL's endless loop
- Docker示例
- php通用的树型类创建无限级树型菜单
- python 常用网站
- my goal
- js图片库
- Burp Suite之Intruder模块（四）