js实现多图左右切换功能

时间：2021-05-26

本文实例为大家分享了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 .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() { 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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章