DDR爱好者之家

js实现多图左右切换功能
站长资源 2024/11/28 佚名
59 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了js多图左右切换功能，供大家参考，具体内容如下

效果图：

js实现多图左右切换功能

<html>

 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <link rel="stylesheet" href="http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css" />
 <!--页面初始化CSS和页面公用头部的css-->
 <style type="text/css">
 @charset "utf-8";
 html,
 body {
 background-color: #f6f5f5;
 }
 
 .vg-body {
 width: 1390px;
 margin: 0 auto;
 }
 /*任务成长值*/
 
 .vg_title {
 font-size: 24px;
 line-height: 24px;
 padding: 20px 0;
 color: #464646;
 }
 
 .vg_task {
 background-color: #fff;
 position: relative;
 }
 
 .vg_task .arrowbtn-left,
 .vg_task .arrowbtn-right {
 position: absolute;
 top: 70px;
 width: 16px;
 height: 20px;
 cursor: pointer;
 }
 
 .vg_task .arrowbtn-left {
 left: 40px;
 border: 1px solid red;
 background: url(../images/arrow-left.png) no-repeat;
 ;
 }
 
 .vg_task .arrowbtn-right {
 right: 40px;border: 1px solid red;
 background: url(../images/arrow-right.png) no-repeat;
 ;
 }
 
 .vg_tasklist {
 width: 1200px;
 overflow: hidden;
 margin: 0 auto;
 }
 
 .vg_tasklist ul {
 width: 999%;
 }
 
 .vg_tasklist li {
 width: 258px;
 height: 130px;
 float: left;
 border: 1px solid #c8c8c8;
 margin: 15px 53px 15px 0;
 position: relative;
 }
 
 .vg_tasklist li .task_hover {
 position: absolute;
 left: -1px;
 top: -1px;
 width: 212px;
 padding: 20px 25px 20px 23px;
 height: 90px;
 border-bottom: 2px solid #e65a5a;
 overflow: hidden;
 background-color: #f0f0f0;
 display: none;
 }
 
 .vg_tasklist li:hover .task_hover {
 display: block;
 }
 
 .task_hover .task_desc {
 font-size: 16px;
 line-height: 20px;
 color: #646464;
 }
 
 .task_hover .task_limittimes {
 font-size: 14px;
 color: #787878;
 float: left;
 padding-top: 12px;
 }
 
 .vg_tasklist li img {
 float: left;
 margin: 22px 8px 20px 20px;
 }
 
 .vg_tasklist li .rightinfo {
 width: 136px;
 float: left;
 text-align: center;
 }
 
 .rightinfo h3 {
 font-size: 16px;
 color: #646464;
 padding-top: 15px;
 }
 
 .rightinfo p {
 font-size: 14px;
 line-height: 26px;
 color: #787878;
 }
 
 .rightinfo a,
 .task_hover a {
 display: block;
 text-align: center;
 width: 96px;
 height: 30px;
 line-height: 30px;
 border: 2px solid #e65a5a;
 border-radius: 5px;
 font-size: 16px;
 font-weight: 700;
 color: #e65a5a;
 }
 
 .task_hover a.done,
 .task_hover a.done:hover {
 background-color: #b4b4b4;
 color: #fff;
 border-color: #b4b4b4;
 cursor: default;
 }
 
 .rightinfo a {
 margin: 12px auto 0;
 }
 
 .task_hover a {
 float: right;
 margin-top: 18px;
 margin-right: -4px;
 }
 
 .task_hover a:hover {
 text-decoration: none;
 background-color: #e65a5a;
 color: #fff;
 }
 /*grid-1230*/
 
 .grid-1230 .vg-body {
 width: 1210px;
 }
 
 .grid-1230 .vg_tasklist {
 width: 1090px;
 }
 
 .grid-1230 .vg_tasklist li {
 margin-right: 16px;
 }
 
 .grid-1230 .vg_task .arrowbtn-left {
 left: 33px;
 }
 
 .grid-1230 .vg_task .arrowbtn-right {
 right: 33px;
 }
 
 .grid-1230 .vg_growth_table {
 padding: 24px 30px;
 }
 
 .grid-1010 .vg-body {
 width: 990px;
 }
 
 .grid-1010 .vg_tasklist {
 width: 850px;
 }
 
 .grid-1010 .vg_tasklist li {
 margin-right: 35px;
 }
 
 .grid-1010 .vg_task .arrowbtn-left {
 left: 30px;
 }
 
 .grid-1010 .vg_task .arrowbtn-right {
 right: 30px;
 }
 
 .grid-1010 .vg_growth_table {
 padding: 24px;
 }
 </style>
 <!--新增样式的css，名称可根据具体需求修改-->
 <script src="/UploadFiles/2021-04-02/jquery.min.js">


 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米