js实现多图左右切换功能_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>

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索多图左右切换
jquery 多图左右切换、多图左右滚动切换效果、带左右箭头的多图轮播、带左右箭头的多图滚动、ppt多图排版技巧，以便于您获取更多的相关知识。

时间： 2024-10-01 10:42:52

js实现多图左右切换功能_javascript技巧的相关文章

js图片轮播手动切换效果_javascript技巧

利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot

JS实现禁止鼠标右键的功能_javascript技巧

遇到网页上有精美图片或者精彩文字想保存时,通常大家都是选中目标后按鼠标右键,在弹出菜单中选择"图片另存为"或"复制"来达到我们的目的.但是,目前有许多网页都屏蔽了鼠标右键,那么用js如何实现禁止鼠标右键的功能呢? 1.与禁止鼠标右键相关的JS说明 <script type="text/javascript"> document.oncontextmenu=new Function("event.returnValue=fal

分步解析JavaScript实现tab选项卡自动切换功能_javascript技巧

本文分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程. 关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换. 代码实例如下: <html> <head> <meta charset=" utf-8"> <title>tab切换</title> <style type="text/css"> body,h2,p{ margin:0px; paddi

利用JS实现页面删除并重新排序功能_javascript技巧

首先,用jqury选择器,选中勾选的行: var cks = $("#indicator_table").find("input[type='checkbox']:checked"); 然后弹出一个确认是否删除框,为是否删除框中的确定绑定一个delInd()事件: 先在页面把选中的那一行,remove或者html(" ")掉, $("#indicator_table").find("input[type='check

在IE8上JS实现combobox支持拼音检索功能_javascript技巧

最近在ie8碰到一个js问题,需要实现(ie8)使用拼音或者拼音首字母来检索select中的内容,原来的combobox只能支持汉字输入检索,现在需要进行改进,现在我将一步一步的实现方法记录下来,功能简单,也可能有bug和不足,供学习参考.(本文只是提供思路学习和备份,实际情况需要在ie8或者ie兼容模式上使用,所以没有考虑到别的浏览器) 目录结构: test |--js |--index.html 在index页面中添加 index.html <!DOCTYPE html> <html

简单实现js页面切换功能_javascript技巧

本文为大家介绍了js页面换肤功能处理原理 (*需要在有服务器环境下测试使用*),供大家参考,具体内容如下原理: 1.换肤是让页面采用不用的样式设置 2.我们把要换肤的地方根据不用皮肤做成多个样式表文件 3.获取link的id 4.修改link的href属性改变样式表 5.采用了不用样式表,就是使用对应皮肤样式 6.利用cookie技术用户原则,用户再次打开页面也会采用上次选用皮肤 7.读取cookie要在页面载入开始,保证对应皮肤css提前加载 <html> <head> &l

原生JS实现图片轮播切换效果_javascript技巧

首先来分析一下轮播图效果的实现原理: 1.父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden; 2.子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute; 3.一个li即一张图片的宽度为父元素的显示宽度 4.初始时,ul的left为0,这时第一张图片即第一个li显示 5.点击下一张按钮,将整个ul左移,使第二个li对齐父元素的左边框,此时ul的left为负的一个li的宽度 6.点击

javascript回车完美实现tab切换功能_javascript技巧

最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel 那样的回车换行的功能在网上找了有关这方面的问题但是都不怎么好用,也有人提供了这方面的思路如何来做, 经过本人的整理和测试,能够很好的解决这个问题: 需要的条件 1,Jquery库地址可以到jquery.com官网上去下载最新的 2,查看界面表单的结构和相对应的表单位置以下是一些才是表单结构复制代码代码如下: <fieldset> <

原生javascript实现Tab选项卡切换功能_javascript技巧

分析个人用原生JS获取类名元素的代码: 复制代码代码如下: getByClassName:function(className,parent){ var elem = [], node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),