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/ 代 ...
随机推荐
- nRF24L01P的ShockBurst与Enhance ShockBurst
nRF24L01P的数据手册里讲到了两个两种发射模式ShockBurst Mode和Enhanced ShockBurst Mode.但是呢,手册里着重的一直在讲Enhanced ShockBurst ...
- leetcode 罗马数字和数字的互相转换
不知哪个大佬说过: 关于字符串的题都可以用指针或哈希解决. 罗马数字转数字: 思想: 我们能观察到规律: 一般情况下,表示大的字母在前,小字母在后; 特殊情况下,小字母会在大字母之前,但是相应的,得到 ...
- typescript之基础类型
基础类型分为:数字.字符串.数组.元组.枚举.Any.Object.Null.Undefined.Never.Void 各种类型写法如下: 1.数字(number) let num:number = ...
- Jenkins安装maven integration plugin失败解决方法
最近装了一个jenkins准备搞一个自动化测试的持续集成,但是在安装maven integration这个插件时报错,试了几次都是失败! 错误原因如下: javadoc安装失败: java.io.IO ...
- JXOI2018
发现自己不会T3可以退群了 排序问题(组合.模拟) 可以发现Gobo Sort相当于在所有排列中随机选择一个,所以当第\(i\)个数出现次数为\(a_i\)时,期望的Sort次数就是\(\frac{( ...
- [高清] Java从入门到精通第3版
------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...
- .net core使用ocelot---第三篇 日志记录
简介 .net core使用ocelot---第一篇 简单使用 .net core使用ocelot---第二篇 身份验证使用 上篇介绍使用asp.net core 创建API网关.本文将介绍Ocelo ...
- 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听
思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...
- Python接口自动化基础---token鉴权
有些登录使用cookie,有些登录需要token验证,token传参一般有两种形式,一种是在请求头中,一种是使用URL传参 这里举例说明一下请求头中的token方式: #登录 param1={'use ...
- HTML Marquee跑马灯
Marquee是html的标签,所有的主流浏览器都能兼容,用于创建文字滚动. 来介绍下标签的属性 滚动方向 direction <!--滚动方向 direction 4个值 up down le ...