<!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. 长短steamId互转

    /** * steam_id转换account_id * @param $steamId * @return mixed */ public static function formatAccount ...

  2. Java集合中List,Set以及Map等集合体系详解

    转载请注明出处:Java集合中List,Set以及Map等集合体系详解(史上最全) 概述: List , Set, Map都是接口,前两个继承至collection接口,Map为独立接口 Set下有H ...

  3. Spring Boot HikariCP 一 ——集成多数据源

    其实这里介绍的东西主要是参考的另外一篇文章,数据库读写分离的. 参考文章就把链接贴出来,里面有那位的代码,简单明了https://gitee.com/comven/dynamic-datasource ...

  4. asp.net 下载视频 保存视屏

    第一张图片为html,第一站图片为js上传视频并播放,限定大小,第三张图片是将视频保存到以字节流的方式保存到数据中,或者是将视频保存到项目中 String filename=this.Filevide ...

  5. django settings配置文件ALLOWED_HOSTS

    ALLOWED_HOSTS列表为了防止黑客入侵,只允许列表中的ip地址访问 填写上“*”可以使所有的网址都能访问Django项目了,项目测试的时候,可以这么做.这样就失去了保护

  6. 自学elastic search

    工作也有一段时间了,虽然来这个公司之后学会了几门不同的语言,但想拨尖还是任重道远. 想往高级程序员甚至是架构师方向发展.他仍然是我的学习对象.我现在做着的,无非是他玩剩下的罢了. luncene之前有 ...

  7. VirtualBox CentOS7 Mini 安装增强工具

    安装相关依赖 # yum install vim gcc kernel kernel-devel bzip2 -y # reboot 点击虚拟机菜单栏 => 设备 => 安装增强功能 # ...

  8. SqlServer2012,设置指定数据库对指定用户开放权限

    REVOKE VIEW ANY DATABASE TO [public] --这个是取消数据库公开的权限,也就是除了sa角色外任何人都不能查看数据库 -- 现在用sa用户登录Use [要开放权限的数据 ...

  9. hbase_基本命令

    hbase 区分大小写. 1) create '表名','列族名'  --多个列族名用逗号分隔 2)  list  desc(查询表名详细信息) 3)  put '表名','行健','列族:列名',' ...

  10. pyc文件

    1.pyc文件 是python预编译后的字节码文件,并不是机器码.2.PyCodeObject 是Python编译器真正编译成的结果: 当python程序运行时,编译的结果是保存在PyCodeObje ...