首页
所有分类
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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
Bootstrap Table使用整理（三）
Jun 09 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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
负载均衡(6) http(6) shell(3) 生成缩略图(1) 前后端分离(1) reload(1) 反向代理(2) 默认端口(3) 防盗链(1) 动静分离(1)
You might like
2021年最新CPU天梯图
2021/03/04 数码科技
PHP的面试题集,附我的答案和分析（一）
2006/11/19 PHP
php 404错误页面实现代码
2009/06/22 PHP
php实现的CSS更新类实例
2014/09/22 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
解放web程序员的输入验证
2006/10/06 Javascript
javascript编程起步（第三课）
2007/02/27 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
2016/06/21 Javascript
node.js报错：Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
vue实现分页组件
2020/06/16 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
日本非常有名的内衣丝袜品牌：GUNZE
2017/01/06 全球购物
经济管理毕业生求职信
2014/03/15 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
css清除浮动clearfix:after的用法详解（附完整代码）
2023/05/21 HTML / CSS