首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现多图左右切换功能

Posted in Javascript onAugust 04, 2016

本文实例为大家分享了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="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>

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

js实现多图左右切换功能

- Author -

cometwo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 #Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 #Javascript
JS图片等比例缩放方法完整示例
Aug 03 #Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 #Javascript
JavaScript中的冒泡排序法
Aug 03 #Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 #Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 #Javascript
东方异文石(1) LOL(1) 暴雪(1) 遗弃(1) 绿林侠盗(1) 我的世界(1) 艾尔登法环(1) 吸血鬼(1) 小缇娜的奇幻之地(1) 战锤40K(1)
You might like
Adodb的十个实例(清晰版)
2006/12/31 PHP
浅谈php扩展imagick
2014/06/02 PHP
php中异常处理方法小结
2015/01/09 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
从零学python系列之数据处理编程实例（二）
2014/05/22 Python
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
tensorflow模型文件(ckpt)转pb文件的方法（不知道输出节点名）
2020/04/22 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python多线程和多进程关系详解
2020/12/14 Python
Columbia美国官网：美国著名的户外服装品牌
2016/11/24 全球购物
电大毕业个人生自我鉴定
2014/03/26 职场文书
企业员工薪酬方案
2014/06/04 职场文书
公务员个人总结
2015/02/12 职场文书
大国崛起观后感
2015/06/02 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
Windows 11要来了？微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技