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/ 代 ...
随机推荐
- A Simple Question of Chemistry
#include<stdio.h> int main() { int i, l; ]; ]; l = ; ) { l++; } ; a[i]!= && i<l; i+ ...
- Asp.net 代码设置兼容性视图
一.代码中设置兼容性 <summary> 兼容性视图 </summary> <param name="myPage"></param> ...
- CacheManager.Core
GitHub地址:https://github.com/MichaCo/CacheManager CacheManager的优点: 让开发人员的生活更容易处理和配资缓存,即使是非常复杂的缓存方案. C ...
- springboot打成jar包后无法解压
springboot打成jar包后无法解压 Springboot打出来的jar,用压缩工具解压报错.Why? 先说解决办法. 1.解决办法 executable属性导致的,属性改成false后重新打包 ...
- 阿里云OSS上传文件本地调试跨域问题解决
问题描述: 最近后台说为了提高上传效率,要前端直接上传文件到阿里云,而不经过后台.因为在阿里云服务器设置的允许源(region)为某个固定的域名下的源(例如*.cheche.com),直接在本地访问会 ...
- MySQL数据库使用时注意事项
MySQL数据库使用时注意事项 建表的角度上 1.合理安排表关系 2.尽量把固定长度的字段放在前面 3.尽量使用char 代替varchar 4.分表:水平分和垂直分 在使用sql语句的时候 1.尽量 ...
- SQL*Plus 与数据库的交互（SQL*Plus时什么）
Oracle 的 SQL*Plus 是与数据库进行交互的客户端工具,在 SQL*Plus中,可以运行 SQL*Plus 命令与 SQL*Plus 语句. SQL*Plus 时一个基于 C/S 两层 ...
- Vivado debug异常现象
前言 bit文件和ltx文件的信号位宽不匹配问题.用了dont_touch等属性没用... WARNING: [Labtools 27-1972] Mismatch between the desig ...
- Referer和空Referer
参考CSDN 原文:https://blog.csdn.net/hxl188/article/details/38964743 Referer和空Referer 最近公司有个接口需要针对几个域名加白名 ...
- jenkins rpm卸载
rpm卸载 1.rpm -e jenkins rpm -ql jenkins 检查是否卸载成功 2.彻底删除残留文件:find / -iname jenkins | xargs -n 1000 rm ...