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/ 代 ...
随机推荐
- 查看线程CPU利用率
查看线程CPU利用率 方法1:利用ps命令查看对应的线程 1. ps -ef | grep 进程名称 2. ps -mp 进程ID -o THREAD,pid,tid,cmd,time,%cpu,%m ...
- Linux 中ifconfig和ip addr命令看不到ip
解决方案: 输入 vi /etc/sysconfig/network-scripts/ifcfg-ens33 将ONBOOT权限改为yes 保存退出,按Esc,输入:wq 重启网络服务,输入 sudo ...
- iOS-右滑返回,利用Runtime添加全屏Pop手势
项目中经常会遇到类似需求,需要在某控制器增加全屏右滑返回功能. 在我们不隐藏 NavigationBar 的前提下,系统会自动替我增加此功能,只是它作用的范围仅仅在屏幕左边有限区域. 我们需要在整个界 ...
- win10远程桌面 CredSSP加密Oracle修正的解决办法
小编在登录远程桌面的时候一直显示由于CredSSP加密Oracle修正 的警告,连接不上.最终通过以下办法解决了 首先点击windows+R键 输入gpedit.msc,点击确定. 然后依次选择:计算 ...
- 9.如何让一个div 上下左右居中?【CS
方法1:[绝对定位50%-本身50%] position:absolute; left:50%; top:50%; transform: tra ...
- C++之同名覆盖、多态
一.同名覆盖引发的问题 父子间的赋值兼容--子类对象可以当作父类对象使用(兼容性) 1.子类对象可以直接赋值给父类对象 2.子类对象可以直接初始化父类对象 3.父类指针可以指向子类对象 4.父类引用可 ...
- Jmeter学习笔记（十三）——xpath断言
1.什么是XPath断言 XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言.XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力. Ap ...
- Android多种方式实现相机圆形预览
效果图如下: 一.为预览控件设置圆角 为控件设置ViewOutlineProvider public RoundTextureView(Context context, AttributeSet at ...
- 【代码片段】定时记录CPU使用率并保存为CSV
原文链接 : [https://blog.zhoutao123.com/#/blog/article/64])(https://blog.zhoutao123.com/#/blog/article/6 ...
- 用户在浏览器输入URL回车之后，浏览器都做了什么
在直接列出执行的步骤之前先来普及几个知识,相信了解完这些知识之后会对前后端的交互有更深入的理解. 1.TCP连接 TCP:Transmission Control Protocol, 传输控制协议,是 ...