<!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. PowerScript数据类型及变量

    PowerBuilder的标准数据类型共有14种 数据类型 意    义 示    例 Blob 二进制数据 可存放可变长度的大量数据,如图片,其它类型的文档数据. 如保存位图 Boolean 布尔型 ...

  2. 19-01【vmware machine】虚拟机无法联网访问

    问题 我本地的虚拟机上没办法访问外网,然后搞了很久很久,最终解决了. 现象 A,电脑持续运行了三天,也没有复杂的环境调整的情况下.我本地的ubuntu(使用VMWare machine创建的),突然没 ...

  3. Sql 根据当前时间，获取星期一具体日期

    --根据当前时间,计算每周一日期,周日为每周第一天 declare @getDate datetime --set @getDate='2018-12-30' set @getDate='2019-0 ...

  4. 18-matlab知识点复习一

    clc; clear; %% 输出 clc, clear; fprintf('%.19f', pi); fprintf('%d', 110); inf pi disp([1,3,5]) disp('a ...

  5. Windows单机配置Zookeeper环境

    转自:http://www.jianshu.com/p/f7037105db46 首先要确保机器已经安装好java环境,并且配置好环境变量   http://apache.fayea.com/zook ...

  6. IIS调试ASP.NET Core项目

    IIS调试ASP.NET Core项目 新建一个ASP.NET Core Web项目,选择API模板或随便一个模板都行 新建一个名为localhost的发布(没试过远程主机,或许也可以),主要设置如下 ...

  7. 由odoo源不稳定想到的，一个非常简单但是有效的方式解决yum源不稳定的问题，实现无限重试

    如题,最近在安装odoo 10, 但是官方源的速度是在是不敢恭维,断断续续的. yum 有没有能够无限重试的参数,于是用python写了个死循环,让它无限重试下去 脚本如下: #! /usr/bin/ ...

  8. 什么是JavaScript原型

    JS 原型 转载自[EC前端 - JavaScript原型] 原型是JavaScript最重要的概念.同时也是初级开发者最忌惮的内容,原因在于网上很少有关于它的合理描述. 但事实上,原型很简单,你可以 ...

  9. java - Integer、int 、String相互转换总结

    一下子还真记不清这三种数据类型之间的转换方法,所以做个小笔记. public class Test03 { public static void main(String[] args) { //int ...

  10. idea debug快捷键 快速查找类

    快速查找类或者文件比如xml .txt Ctrl + Shift + N 快速查找类 双击Shift 选中代码右移 Tab 选中代码左移 Shift + Tab 选中代码上下移 Shift + Alt ...