js实现多图左右切换功能

前端技术 2023/09/07 JavaScript

本文实例为大家分享了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=\"http://libs.baidu.com/jquery/2.0.0/jquery.min.js\"></script>
 <script>
 window.onresize = function() {
 var winWidth = document.body.clientWidth;
 if(winWidth <= 1230) {
  body.className = \"grid-1010\";
 } else if(winWidth <= 1410) {
  body.className = \"grid-1230\";
 } else if(winWidth > 1410) {
  body.className = \"grid-1410\";
 } else {
  alert(\"do not know!\");
 }
 }
 </script>
 </head>

 <body id=\"body\">
 <script>
 //初始化状态显示样式判断,放在body后面
 var winWidth = document.body.clientWidth;
 if(winWidth <= 1230) {
 body.className = \"grid-1010\";
 } else if(winWidth <= 1410) {
 body.className = \"grid-1230\";
 } else if(winWidth > 1410) {
 body.className = \"grid-1410\";
 } else {
 alert(\"do not know!\");
 }
 </script>
 <div class=\"vg-body\">
 <!--任务成长值 开始-->
 <div class=\"vg_title\">
 <p>任务成长值</p>
 </div>
 <div class=\"vg_task\">
 <div class=\"arrowbtn-left\"></div>
 <div class=\"arrowbtn-right\"></div>
 <div class=\"vg_tasklist\">
  <ul class=\"cf\" id=\"switchPic\">
  <li>
  <img src=\"images/task_year.png\">
  <div class=\"rightinfo\">
  <h3>开通年费会员</h3>
  <p>奖励成长值<span>200</span>点</p>
  <a href=\"javascript:;\">已完成></a>
  </div>
  <div class=\"task_hover\">
  <p class=\"task_desc\">一次性开通年费会员（12个月及以上）</p>
  <p class=\"task_limittimes\">月限<span>1</span>次</p>
  <a href=\"javascript:;\" class=\"done\">已完成</a>
  </div>
  </li>
  <li>
  <img src=\"images/task_lianxubaoyue.png\">
  <div class=\"rightinfo\">
  <h3>开通连续包月</h3>
  <p>奖励成长值<span>10</span>点</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  <div class=\"task_hover\">
  <p class=\"task_desc\">一次性开通年费会员（12个月及以上）</p>
  <p class=\"task_limittimes\">月限<span>1</span>次</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  </li>
  <li>
  <img src=\"images/task_year.png\">
  <div class=\"rightinfo\">
  <h3>升级成为SVIP</h3>
  <p>奖励成长值<span>10</span>点</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  <div class=\"task_hover\">
  <p class=\"task_desc\">一次性开通年费会员（12个月及以上）</p>
  <p class=\"task_limittimes\">月限<span>1</span>次</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  </li>
  <li>
  <img src=\"images/task_year.png\">
  <div class=\"rightinfo\">
  <h3>关注微信公众号</h3>
  <p>奖励成长值<span>10</span>点</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  <div class=\"task_hover\">
  <p class=\"task_desc\">一次性开通年费会员（12个月及以上）</p>
  <p class=\"task_limittimes\">月限<span>1</span>次</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  </li>
  <li>
  <img src=\"images/task_year.png\">
  <div class=\"rightinfo\">
  <h3>任务555555555</h3>
  <p>奖励成长值<span>10</span>点</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  <div class=\"task_hover\">
  <p class=\"task_desc\">一次性开通年费会员（12个月及以上）</p>
  <p class=\"task_limittimes\">月限<span>1</span>次</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  </li>
  <li>
  <img src=\"images/task_year.png\">
  <div class=\"rightinfo\">
  <h3>任务666666666</h3>
  <p>奖励成长值<span>10</span>点</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  <div class=\"task_hover\">
  <p class=\"task_desc\">一次性开通年费会员（12个月及以上）</p>
  <p class=\"task_limittimes\">月限<span>1</span>次</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  </li>
  <li>
  <img src=\"images/task_year.png\">
  <div class=\"rightinfo\">
  <h3>任务7777777</h3>
  <p>奖励成长值<span>10</span>点</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  <div class=\"task_hover\">
  <p class=\"task_desc\">一次性开通年费会员（12个月及以上）</p>
  <p class=\"task_limittimes\">月限<span>1</span>次</p>
  <a href=\"javascript:;\">去完成></a>
  </div>
  </li>
  </ul>
 </div>
 </div>
 <!--任务成长值 结束-->
 </div>
 </body>
 <script>
 //task growth
 var switchPic = (function() {

 /*
now:当前第几个li
linum:总共几个li
shownum:要展示几个li
w_li:li的宽度
marginR_li:li的右边距
*/
 var now = 1;
 var linum, shownum, offset, w_li, marginR_li, pre, next, wrap;

 function init(o) {
 pre = o.preBtn;
 next = o.nextBtn;
 wrap = o.wrap;
 bindBtn();
 }

 function btnShow() {
 getInfo();
 if(linum <= shownum) { //如果li总个数小于要展示的个数，pre和next都不显示
  pre.hide();
  next.hide();
 } else if(now == 1) { //初始化，只显示next
  pre.hide();
  next.show();
 } else if(now == linum - shownum + 1) { //到最后一组，只显示pre
  pre.show();
  next.hide();
 } else { //中间pre,next都显示。
  pre.show();
  next.show();
 }
 }

 function getInfo() {
 linum = $(\"#switchPic\").find(\"li\").size();
 if($(\"#body\").hasClass(\"grid-1010\")) {
  shownum = 3;
  w_li = wrap.find(\"li\").outerWidth(); //算上了border的宽度
  marginR_li = parseInt(wrap.find(\"li\").css(\"marginRight\"));
  offset = w_li + marginR_li;
 } else if($(\"#body\").hasClass(\"grid-1230\")) {
  shownum = 4;
  w_li = wrap.find(\"li\").outerWidth(); //算上了border的宽度
  marginR_li = parseInt(wrap.find(\"li\").css(\"marginRight\"));
  offset = w_li + marginR_li;
 } else if($(\"#body\").hasClass(\"grid-1410\")) {
  shownum = 4;
  w_li = wrap.find(\"li\").outerWidth(); //算上了border的宽度
  marginR_li = parseInt(wrap.find(\"li\").css(\"marginRight\"));
  offset = w_li + marginR_li;
 }
 }

 function bindBtn() {
 btnShow();
 next.on(\"click\", function() {
  now++;
  btnShow();
  wrap.stop(true).animate({
  \"margin-left\": -(now - 1) * offset
  });
 });
 pre.on(\"click\", function() {
  now--;
  btnShow();
  wrap.stop(true).animate({
  \"margin-left\": -(now - 1) * offset
  });
 });

 $(window).resize(function() {
  now = 1;
  btnShow();
  wrap.animate({
  \"margin-left\": 0
  });
 });
 }
 return {
 init: init
 }
 })();

 switchPic.init({
 preBtn: $(\".arrowbtn-left\"),
 nextBtn: $(\".arrowbtn-right\"),
 wrap: $(\"#switchPic\")
 });
 </script>

</html>

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/18166

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案