2019.11.15 JQ图片轮播
<div class="three">
<div class="bjtp">
<img class="bjpic b1" src="../public/images/hero_01.jpg">
<img class="bjpic b2" src="../public/images/hero_02.jpg">
<img class="bjpic b3" src="../public/images/hero_03.jpg">
<img class="bjpic b4" src="../public/images/hero_04.jpg">
<img class="bjpic b5" src="../public/images/hero_05.jpg">
<img class="bjpic b6" src="../public/images/hero_06.jpg">
</div>
<div class="bpic">
<img class="bpin bb1" src="../public/images/hero_01_ren.png">
<img class="bpin bb2" src="../public/images/hero_02_ren.png">
<img class="bpin bb3" src="../public/images/hero_03_ren.png">
<img class="bpin bb4" src="../public/images/hero_04_ren.png">
<img class="bpin bb5" src="../public/images/hero_05_ren.png">
<img class="bpin bb6" src="../public/images/hero_06_ren.png">
</div>
<div class="nk">
<div class="txbox">
<div class="tx t1" style="filter: brightness(130%);">
<img src="../public/images/hero_01_head.png">
</div>
<div class="tx t2">
<img src="../public/images/hero_02_head.png">
</div>
<div class="tx t3">
<img src="../public/images/hero_03_head.png">
</div>
<div class="tx t4">
<img src="../public/images/hero_04_head.png">
</div>
<div class="tx t5">
<img src="../public/images/hero_05_head.png">
</div>
<div class="tx t6">
<img src="../public/images/hero_06_head.png">
</div>
</div>
<div class="unbox">
<div class="m ming1" style="filter: brightness(130%);">
<p">黑衣剑士</p>
</div>
<div class="m ming2">
<p>黑</p>
</div>
<div class="m ming3">
<p">空</p>
</div>
<div class="m ming4">
<p">白</p>
</div>
<div class="m ming5">
<p">御坂美琴</p>
</div>
<div class="m ming6">
<p">阿库娅</p>
</div>
</div>
</div>
<div class="jieshao">
<div class="baidi">
<div class="uppic">
<div class="up1 u1">
<div class="hyjs">
黑衣剑士<span>/ 战斗</span>
</div>
<div class="wjz">
<div>位移</div>
<div class="ggg"></div>
<div>机动</div>
<div class="ggg"></div>
<div>真伤</div>
</div>
<div class="wenzi">
黑色剑士是一个高机动突击型战斗英雄，
他可以使用四方斩快速切入战场，
并施展二刀流上位技能对敌方造成致命伤害。</div>
<div class="npp">
<img src="../public/images/hero_01_detail.png">
</div>
</div>
<div class="up1 u2">
<div class="hyjs">
黑<span>/ 爆发</span>
</div>
<div class="wjz">
<div>爆发</div>
<div class="ggg"></div>
<div>潜行</div>
<div class="ggg"></div>
<div>支援</div>
</div>
<div class="wenzi">
黑是一个潜行支援型爆发英雄，
他可以使用影踪隐蔽潜入战场，
也可以将自己量子化后瞬移刺杀敌方。
</div>
<div class="npp">
<img src="../public/images/hero_02_detail.png">
</div>
</div>
<div class="up1 u3">
<div class="hyjs">
空<span>/ 防御</span>
</div>
<div class="wjz">
<div>支援</div>
<div class="ggg"></div>
<div>承伤</div>
<div class="ggg"></div>
<div>辅助</div>
</div>
<div class="wenzi">
空是一个强大辅助型防御英雄，
他擅长利用游戏规则进行作战，
游戏欺诈对友方给予保护，
游戏陷阱对敌方造成伤害。
</div>
<div class="npp">
<img src="../public/images/hero_03_detail.png">
</div>
</div>
<div class="up1 u4">
<div class="hyjs">
白<span>/ 射击</span>
</div>
<div class="wjz">
<div>输出</div>
<div class="ggg"></div>
<div>机动</div>
<div class="ggg"></div>
<div>核心</div>
</div>
<div class="wenzi">
白是一个强力站桩型射击英雄，
她可以通过精密计算，利用周围
地理环境对敌方进行极致输出。
</div>
<div class="npp">
<img src="../public/images/hero_04_detail.png">
</div>
</div>
<div class="up1 u5">
<div class="hyjs">
御坂美琴<span>/ 魔法</span>
</div>
<div class="wjz">
<div>爆发</div>
<div class="ggg"></div>
<div>团控</div>
<div class="ggg"></div>
<div>位移</div>
</div>
<div class="wenzi">
御坂美琴是一个高爆发伤害型魔法英雄，
她可以迅速切入战场，聚集雷云展开真正
的落雷毁灭在场所有敌方单位。
</div>
<div class="npp">
<img src="../public/images/hero_05_detail.png">
</div>
</div>
<div class="up1 u6">
<div class="hyjs">
阿库娅<span>/ 协助</span>
</div>
<div class="wjz">
<div>治疗</div>
<div class="ggg"></div>
<div>支援</div>
<div class="ggg"></div>
<div>解控</div>
</div>
<div class="wenzi">
阿库娅是一个全能型协助英雄，
兼具治疗、解控、复活、减速、
减甲、嘲讽等的能力。
</div>
<div class="npp">
<img src="../public/images/hero_06_detail.png">
</div>
</div>
</div>
</div>
</div>
<div class="jiantou">
<div class="jtl">
<img src="../public/images/sprite.png">
</div>
<div class="jtr">
<img src="../public/images/sprite.png">
</div>
</div>
</div>
css：
.three {
overflow: hidden;
z-index:;
position: relative;
height: 958px;
background-repeat: no-repeat;
background-size: 138%;
}
.bjtp {
position: absolute;
height: 958px;
}
.bjtp img {
width: 140%;
}
.bpic {
z-index:;
position: absolute;
height: 958px;
overflow: hidden;
}
.bpic img {
float: left;
width: 1857px;
}
/* ----矢量背景结束---------------- */
.jiantou {
width: 100%;
overflow: hidden;
position: absolute;
z-index:;
margin-top: -260px;
}
.jtl {
transition: all .4s ease;
margin-left: 65px;
float: left;
overflow: hidden;
height: 85px;
width: 70px;
}
.jtl:hover {
cursor: pointer;
filter: brightness(130%);
}
.jtr {
transition: all .4s ease;
margin-right: 80px;
float: right;
overflow: hidden;
height: 85px;
width: 70px;
}
.jtr:hover {
cursor: pointer;
filter: brightness(130%);
}
.jtr img {
margin-left: -75px;
}
/* -----箭头结束---------------- */
.nk {
margin-top: 255px;
margin-left: 490px;
overflow: hidden;
position: absolute;
z-index:;
}
.tx {
transition: all .4s ease;
color: white;
text-align: center;
margin: 0px 10px 0px 10px;
float: left;
filter: brightness(50%);
}
.tx p {
margin-top: 5px;
display: none;
}
.tx:hover {
cursor: pointer;
}
.tx:hover p {
display: block;
}
.unbox {
transition: all .4s ease;
color: white;
text-align: center;
}
.m {
height: 25px;
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin-top: 7px;
float: left;
width: 111px;
font-weight:;
filter: brightness(50%);
}
/* ----头像结束---------------- */
.jieshao {
z-index:;
position: relative;
border: 1px solid white;
padding: 10px;
margin-top: 411px;
margin-left: 521px;
width: 625px;
height: 310px;
}
.baidi {
position: relative;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.8;
}
.uppic {
overflow: hidden;
position: relative;
width: 603px;
height: 288px;
}
.up1 {
position: relative;
width: 603px;
height: 288px;
padding: 10px;
}
.hyjs {
height: 80px;
margin-left: 18px;
font-size: 50px;
color: #323233;
font-weight:;
}
.hyjs span {
margin-left: 6px;
font-size: 17px;
color: #d11f1f;
}
.wjz {
display: flex;
justify-content: center;
width: 195px;
height: 30px;
margin-left: 20px;
background: #323233;
color: #ececec;
text-align: center;
line-height: 30px;
}
.wjz div {
float: left;
}
.ggg {
margin: 5px 15px 0px 15px;
width: 1px;
height: 20px;
background-color: #505e63;
}
.wenzi {
float: left;
height: 131px;
width: 253px;
color: #2f2f30;
margin-left: 19px;
margin-top: 19px;
line-height: 30px;
font-size: 15px;
}
.npp {
position: relative;
margin-top: -73px;
margin-left: 302px;
}
js：
// ------点击头像更换背景等-----------------------
$('.t1').click(function() {
$(".u1,.bb1").stop().show(500).siblings().stop().hide(500);
$(".b1").stop().show().siblings().stop().hide();
$(".t1").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
$(".ming1").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
ind = 0; });
$('.t2').click(function() {
$(".u2,.bb2").stop().show(500).siblings().stop().hide(500);
$(".b2").stop().show().siblings().stop().hide();
$(".t2").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
$(".ming2").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
ind = 1; });
$('.t3').click(function() {
$(".u3,.bb3").stop().show(500).siblings().stop().hide(500);
$(".b3").stop().show().siblings().stop().hide();
$(".t3").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
$(".ming3").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
ind = 2; });
$('.t4').click(function() {
$(".u4,.bb4").stop().show(500).siblings().stop().hide(500);
$(".b4").stop().show().siblings().stop().hide();
$(".t4").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
$(".ming4").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
ind = 3; });
$('.t5').click(function() {
$(".u5,.bb5").stop().show(500).siblings().stop().hide(500);
$(".b5").stop().show().siblings().stop().hide();
$(".t5").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
$(".ming5").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
ind = 4; });
$('.t6').click(function() {
$(".u6,.bb6").stop().show(500).siblings().stop().hide(500);
$(".b6").stop().show().siblings().stop().hide();
$(".t6").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
$(".ming6").css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
ind = -1; });
// --------------左右箭头点击轮播-------------------------
$('.jtr').click(function() {
ind++;
$(".up1").eq(ind).stop().show(500).siblings().stop().hide(500);
$(".bpin").eq(ind).stop().show(500).siblings().stop().hide(500);
$(".bjpic").eq(ind).stop().show().siblings().stop().hide();
$(".tx").eq(ind).css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
$(".m").eq(ind).css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
if (ind == 5) {
ind = -1;
}
});
$('.jtl').click(function() {
ind--;
$(".up1").eq(ind).stop().show(500).siblings().stop().hide(500);
$(".bpin").eq(ind).stop().show(500).siblings().stop().hide(500);
$(".bjpic").eq(ind).stop().show().siblings().stop().hide();
$(".tx").eq(ind).css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
$(".m").eq(ind).css("filter", "brightness(130%)").siblings().css("filter", "brightness(50%)");
if (ind == -1) {
ind = 5;
}
});
2019.11.15 JQ图片轮播的更多相关文章
- JQ图片轮播
<script src="{staticurl action="jquery.js" type="js"}"></scri ...
- jq实现图片轮播:圆形焦点+左右控制+自动轮播
来源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...
- html+jq实现简单的图片轮播
今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- UIScrollView实现图片轮播器及其无限循环效果
图片轮播器: 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- CSS快速制作图片轮播的焦点
来源:http://www.ido321.com/858.html 效果图: 演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/ 代 ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
随机推荐
- 路由Routers
路由Routers 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提供 ...
- Java性能调优—— VisualVM工具基本使用及监控本地和远程JVM进程超详细使用教程
- Feign 失败降级未生效和超时配置优先级问题
一.问题: 生产环境服务A 通过feign调用 服务B,服务A报警信息如下: 详细分析发现问题 (1)服务A调用服务B失败,未触发声明的失败降级操作 (2)同时配置ribbon和feign超时时间,优 ...
- 【题解】Luogu P4910 帕秋莉的手环
原题传送门 "连续的两个中至少有1个金的"珂以理解为"不能有两个木相连" 我们考虑一个一个将元素加入手环 设f\([i][0/1]\)表示长度为\(i\)手环末 ...
- Linux操作系统六大优点
打开百度App,看更多图片 1.免费开源.Linux是一款完全免费的操作系统,任何人都可以从网络上下载到它的源代码,并可以根据自己的需求进行定制化的开发,而且没有版权限制. 2.模块化程度高.Linu ...
- 【CF1095F】 Make It Connected（最小生成树）
题目链接 如果没有特殊边的话显然答案就是权值最小的点向其他所有点连边. 所以把特殊边和权值最小的点向其他点连的边丢一起跑最小生成树就行了. #include <cstdio> #inclu ...
- 阿里云OSS上传文件demo
1.安装ali-oss npm install ali-oss --save 2.demo 此例中使用到了ElementUI的el-upload组件.因为样式为自定义的 所以没有用element的自动 ...
- element-ui DatePicker 日期格式处理
1.使用DatePicker 日期选择器得到的日期格式是这样的 解决方案,添加 value-format="yyyy-MM-dd" <el-date-picker type= ...
- ios手机app消息推送
h5+app项目,推送平台 " 个推 " 首先在manifest.json配置文件中点击模块权限配置,勾选push消息推送配置如图1-1 第二部在manifest.json配置文件 ...
- android RecyclerView的Grid布局案例
1.先创建activity_grid.xml 和 activity_grid_item.xml <?xml version="1.0" encoding="utf- ...