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/ 代 ...
随机推荐
- xorm-Iterate/Count/Rows方法实例
package main import ( "fmt" _ "github.com/go-sql-driver/mysql" "github.com/ ...
- Android--打开指定程序（微博/微信/QQ等）
Intent intent = new Intent(); ComponentName cmp = new ComponentName("com.sina.weibo"," ...
- [洛谷P5329][SNOI2019]字符串
题目大意:给一个长度为$n$的字符串$s$,字符串$p_i$为字符串$s$去掉第$i$个字符后形成的字符串.请给所有字符串$p_i$排序(相同字符串按编号排序) 题解:先去掉所有连续相同字符,因为它们 ...
- [LOJ#3119][Luogu5405][CTS2019]氪金手游(DP+容斥)
先考虑外向树的做法,显然一个点在其子树内第一个出现的概率等于它的权值除以它子树的权值和.于是f[i][j]表示i的子树的权值和为j时,i子树内所有数的相互顺序都满足条件的概率,转移直接做一个背包卷积即 ...
- c# NPOI文件操作
public static Byte[] RenderDataToExcel<T>(List<T> SourceList, List<String> filter) ...
- Python之TensorFlow的数据的读取与存储-2
一.我们都知道Python由于GIL的原因导致多线程并不是真正意义上的多线程.但是TensorFlow在做多线程使用的时候是吧GIL锁放开了的.所以TensorFlow是真正意义上的多线程.这里我们主 ...
- Ubuntu 18.04 上使用xrdp远程桌面连接（Windows远程桌面连接）
Ubuntu18.04设置#安装xrdpsudo apt-get install xrdp #安装vnc4serversudo apt-get install vnc4server tightvncs ...
- Java Swing 资料（转载学习）
Swing图像界面简介:https://blog.csdn.net/xietansheng/article/details/72814531 Swing实用经验总结篇:https://blog.csd ...
- ChipGenius 识别U盘主控信息
ChipGenius 识别U盘主控信息 ================== End
- iOS - 小功能 跳转到淘宝或天猫的商品展示详情页
最近做iOS项目的时候遇到一个需求,点击广告页,跳转到淘宝或天猫的商品详情页. 具体需要是这样: 1)安装了淘宝:跳转到淘宝详情页. 2)没装淘宝,装了天猫:跳转到天猫详情页 3)淘宝.天猫都没装:跳 ...