<!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>

jQuery-爱奇艺图片切换的更多相关文章

  1. 用原生JS实现爱奇艺首页导航栏

    以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> < ...

  2. 得到、微信、美团、爱奇艺APP组件化架构实践

    一.背景 随着项目逐渐扩展,业务功能越来越多,代码量越来越多,开发人员数量也越来越多.此过程中,你是否有过以下烦恼? 项目模块多且复杂,编译一次要5分钟甚至10分钟?太慢不能忍? 改了一行代码 或只调 ...

  3. 动态获取爱奇艺上传视频mp4格式url地址

    有时候,在工作中有些客户需要用到视频,我们大家都知道视频是非常的耗费流量的,因此,如果因为项目要求客户单独买台视频服务器是非常划不来的.那么将视频上传到优酷,爱奇艺等视频网站来托管那是一件很好的解决方 ...

  4. 仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...

  5. 爱奇艺技术分享：爱奇艺Android客户端启动速度优化实践总结

    本文由爱奇艺技术团队原创分享,原题<爱奇艺Android客户端启动优化与分析>. 1.引言 互联网领域里有个八秒定律,如果网页打开时间超过8秒,便会有超过70%的用户放弃等待,对Andro ...

  6. 干货|爱奇艺CDN巡检系统技术解析

    小结: 1. 中心处理系统 /1/将定制后的巡检任务拆分,通过配置与任务分发系统.CMDB*( configuration management database)将派发到边缘拨测系统/2/处理边缘拨 ...

  7. 如何使用油猴脚本不要vip就能观看各大视频网站如腾讯，爱奇艺等的vip视频

    如何使用油猴脚本不要vip就能观看各大视频网站如腾讯,爱奇艺等的vip视频 首先打开谷歌商店(这里需要fq,如不能fq的小伙伴请看上面写的Chrome怎么访问外网) 搜索Tampermonkey,点击 ...

  8. 视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频

      视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频  2018-07-11 |  标签»下载, 下载工具, 视频 又是视频下载,老生常谈的话题.阿刚同学已在乐软博客多次与大家分享推荐 ...

  9. 从B站、爱奇艺、映客的IPO上市，看国内视频公司的内容审核现状

    本文由  网易云发布. 3月30日,中央电视台<经济半小时>栏目讲述了网络上的一个顽症——色情内容.在这期主题为<互联网上的“色诱”>的节目中,央视的记者揭示了色情直播的猖獗. ...

随机推荐

  1. 【搬运】 Page Object 官方文档 （新增了Widget特性）

    Appium Java client has facilities which components to [Page Object](https://github.com/SeleniumHQ/se ...

  2. CodeForces 900D Unusual Sequences

    题目链接: https://codeforces.com/contest/900/problem/D 题意 假设有distinct 正整数序列{a1,a2,,,an},满足gcd(a1, a2, .. ...

  3. Python开发【初始篇】：Linux下安装Python3

    Linux系统默认自带python2.6的版本,这个版本被系统很多程序所依赖,所以建议不要轻易删除,除非你能解决其他程序的依赖问题.如果使用最新的Python3需要进行编译安装源码包,这样就对系统默认 ...

  4. 创建一个 mac 的后台进程（daemon）

    Mac中创建守护进程(Daemon) 创建一个可以执行的脚本 hello.sh touch /Users/oslivan/test/hello.sh chmod 755 /Users/oslivan/ ...

  5. hbase——b树，b+树，lsm树

    b树 b树,又叫做平衡多路查找树.一个m阶的b树的特性如下: 树中的每个节点,最多有m个子节点. 除了根节点之外,其他的每个节点至少有ceil(m/2)个子节点,ceil函数为取上限函数. 所有的叶子 ...

  6. ng环境搭建步骤

    1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...

  7. Connection failed Flowsocketconnector Failed to connect to target addressWindows error10061:由于目标计算机积极拒绝,无法连接

    使用bitbise时报上面错误   : 解决方法 :卸载软件并删除相关的文件 (包含bitvise 及注册表中的文件)重新安装后能连接

  8. python基础之Day22

    1.组合 什么是? 一个类的对象具备某一个属性,该属性值属于另一个类的对象,这样就可以引用 为何用: 解决类与类之间代码冗余问题 如何用? 2.菱形继承 单继承:一个个往父类上查找 菱形:一个子类继承 ...

  9. iframe和form表单实现ajax请求上传数据

    form的target属性设置为iframe的name值时,表示提交到url后返回的数据显示到iframe区域 <form action="/upload.html" met ...

  10. python-directory

    #!/usr/bin/python # --*-- coding: utf-8 --*-- directory={ "张三":16, "李四":46, &quo ...