一、最终效果

二、功能分析

1、需求分析

点击左边pre按钮，显示前面三个图片，点击右边的next按钮，显示后面的一组（三个）图片。初始化只显示next按钮，到最后一组只显示pre按钮，中间过程两按钮都显示。

2、html结构分析

 <div class="activity" id="activity-slide">

        <a href="javascript:void(0)" class="pg_left ps_pre"></a>

        <a href="javascript:void(0)" class="pg_right ps_next" ></a>

          <ul class="clearfix">

            <li><a href="javascript:;"><img src="data:images/activity01-1410.jpg"></a></li>

            <li><a href="javascript:;"><img src="data:images/activity02-1410.jpg"></a></li>

            <li><a href="javascript:;"><img src="data:images/activity03-1410.jpg"></a></li>

            <li><a href="javascript:;"><img src="data:images/activity03-1410.jpg"></a></li>

            <li><a href="javascript:;"><img src="data:images/activity02-1410.jpg"></a></li>

      </ul>

</div>

#activity-slide是整个幻灯的入口，后面会将其作为参数来调用幻灯功能。

两个按钮ps_pre和ps_next将添加click事件响应点击切换功能。

3、功能分析

因为左右切换都是三个为一组的切换，如果li总个数不是3的倍数时，需要增加li节点填满。

//需要追加的li节点个数

var addli = 0;

//一组切换3个li

var num=3;

var lisize = a.find("ul li").size();//获取li个数

//判断需要添加的li节点数量

var reminder=lisize%num;

if(lisize%num!=0){addli = num-reminder;}

else{addli = 0;}

addlist();

上面是判断得到需要追加的个数lisize，然后调用addlist追加。

addlist如下，从ul的第一个li开始复制，需要几个就复制出几个节点追加。节点追加完毕后重新计算ul的宽度。

        function addlist(){

            for(i=0;i<addli;i++){

                var html = a.find("ul li").eq(i).html();

                a.find("ul").append("<li>"+html+"</li>");

            }

            a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});

        }

现在准备工作已经完成了。接下来就是给按钮添加响应事件。在幻灯切换时涉及到左右按钮的显示和隐藏，所以先说这个按钮显示功能，将此分装成一个函数btnshow。

        /***

        参数说明：

        now:当前是第几组，默认是0

        c:总共有几组

        d:初始化时li的个数

        e:每组显示li个数

        ***/

        function btnshow(now,c,d,e){

            if(d<=e){//如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮

                a.find(".ps_next").hide();

                a.find(".ps_pre").hide();

            }else if(now==0){//初始化now=0，显示第一组，只显示next

                a.find(".ps_next").show();

                a.find(".ps_pre").hide();

            }else if(now==c-1){//显示到最后一组，只显示pre

                a.find(".ps_next").hide();

                a.find(".ps_pre").show();

            }else{//显示中间组，pre和next都需要显示

                a.find(".ps_next").show();

                a.find(".ps_pre").show();

            }

        }

接下来幻灯切换。这里a是传入的参数，也就是 #activity-slide。给它下面的所以的pre和next添加响应。

向前一组，组数now减一，now是几，就让ul的margin-left为负几倍的组宽（即3倍的（li宽度+margin宽度）），然后显示对于按钮即可。

向后滑动一组li同理。

        function photoscroll(){

            a.find(".ps_pre").on("click",function(){//console.log(num);

                now--;

                if(now >= 0){

                    a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});

                    btnshow(now,parseInt((lisize+addli)/num),lisize,num);

                }

            });

            a.find(".ps_next").on("click",function(){//console.log(num);

                now++;

                if(now < (lisize+addli)/num){

                    a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});

                    btnshow(now,parseInt((lisize+addli)/num),lisize,num);

                }

            });

            btnshow(now,parseInt((lisize+addli)/num),lisize,num);

        }

三、代码

1、用到图片

2、完整代码

完整代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script>

window.onresize=function(){

    var winWidth = document.body.clientWidth;

    if(winWidth <=1180){

        body.className="grid-960";

    }else  if (winWidth<= 1410){

        body.className="grid-1180";

    }else if (winWidth>1410){

        body.className="grid-1410";

    }else {

        alert("do not know!");

    }

}

</script>

</head>

<body id="body" class="">

<script>//初始化状态显示样式判断,放在body后面

var winWidth = document.body.clientWidth;

if (winWidth <=1180){

    body.className="grid-960";

}else  if (winWidth<= 1410){

    body.className="grid-1180";

}else if (winWidth>1410){

    body.className="grid-1410";

}else {

    alert("do not know!");

}

</script>

<div class="wapper">

    <div class="section">

        <h2 class="title">热门活动</h2>

        <div class="activity" class="movie" id="activity-slide">

            <a href="javascript:void(0)" class="pg_left ps_pre"></a>

            <a href="javascript:void(0)" class="pg_right ps_next" ></a>

            <ul class="clearfix">

                <li><a href="javascript:;"><img src="data:images/activity01-1410.jpg"></a></li>

                <li><a href="javascript:;"><img src="data:images/activity02-1410.jpg"></a></li>

                <li><a href="javascript:;"><img src="data:images/activity03-1410.jpg"></a></li>

                <li><a href="javascript:;"><img src="data:images/activity03-1410.jpg"></a></li>

                <li><a href="javascript:;"><img src="data:images/activity02-1410.jpg"></a></li>

            </ul>

        </div>

    </div>

</div>

</body>

</html>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

//首页图片滚动切换

(function($){

    $.photolist=function(a){

        var w_li = a.find("li").width();

        var h_li = a.find("li").height();

        var margin_li=parseInt(a.find("li").css("marginLeft"));

        var now = 0;

        var num = 0;

        var addli = 0;

        var lisize = a.find("ul li").size();

        var htmlall = a.find("ul").html();

        //判断每次滚动数量

        /*

        var w_body = $("body").width();

        if(w_body <=1170){

            var num = 3;

        }else if(w_body<= 1380){

            var num = 4;

        }else if(w_body>1380){

            var num = 5;

        }

        */

        var num=3;

        //判断需要添加的li节点数量

        var reminder=lisize%num;

        if(lisize%num!=0){addli = num-reminder;}

        else{addli = 0;}

        addlist();

        //点击滚动事件

        photoscroll();

        $(window).resize(function(){

            //location.reload();

            now = 0;

            addli = 0;

            a.find("ul").html(htmlall);//html内容还原初始值

            a.find(".ps_next").show();//按钮样式初始化

            a.find(".ps_pre").hide();

            //判断每次滚动数量

            /*

            var w_body = $("body").width();

            if(w_body <=1170){

                var num = 3;

            }else if(w_body<= 1380){

                var num = 4;

            }else if(w_body>1380){

                var num = 5;

            }

            */

            var num=3;

            //判断需要添加的li节点数量

            var reminder=lisize%num;

            if(lisize%num!=0){addli = num-reminder;}

            else{addli = 0;}

            addlist();

            w_li = a.find("li").width();

            margin_li=parseInt(a.find("li").css("marginLeft"));

            a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});

            a.find("ul").animate({"margin-left":0});//ul位置还原

            btnshow(now,parseInt((lisize+addli)/num),lisize,num);

        });

        function addlist(){

            for(i=0;i<addli;i++){

                var html = a.find("ul li").eq(i).html();

                a.find("ul").append("<li>"+html+"</li>");

            }

            a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});

            //console.log(a.find("ul li").size());

        }

        function photoscroll(){

            a.find(".ps_pre").on("click",function(){//console.log(num);

                now--;

                if(now >= 0){

                    a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});

                    btnshow(now,parseInt((lisize+addli)/num),lisize,num);

                }

            });

            a.find(".ps_next").on("click",function(){//console.log(num);

                now++;

                if(now < (lisize+addli)/num){

                    a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});

                    btnshow(now,parseInt((lisize+addli)/num),lisize,num);

                }

            });

            btnshow(now,parseInt((lisize+addli)/num),lisize,num);

        }

        /***

        参数说明：

        now:当前是第几组，默认是0

        c:总共有几组

        d:初始化时li的个数

        e:每组显示li个数

        ***/

        function btnshow(now,c,d,e){

            if(d<=e){//如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮

                a.find(".ps_next").hide();

                a.find(".ps_pre").hide();

            }else if(now==0){//初始化now=0，显示第一组，只显示next

                a.find(".ps_next").show();

                a.find(".ps_pre").hide();

            }else if(now==c-1){//显示到最后一组，只显示pre

                a.find(".ps_next").hide();

                a.find(".ps_pre").show();

            }else{//显示中间组，pre和next都需要显示

                a.find(".ps_next").show();

                a.find(".ps_pre").show();

            }

        }

    }

})(jQuery);

$.photolist($("#activity-slide"));

</script>

css部分：

@charset "utf-8";

body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, button, textarea, table, tbody, tfoot, thead, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; outline:nonebackground:transparent;

}

article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }

body, button, input, select, textarea { font: 12px/1.5 arial, \5b8b\4f53, sans-serif; }

h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-size: 100%; outline: none }

address, cite, dfn, em, var { font-style: normal; }

code, kbd, pre, samp { font-family: courier new, courier, monospace; }

small { font-size: 12px; }

ul, ol, li { list-style: none; }

img { border: none; }

a { text-decoration: none; outline: thin none; }

a:hover { text-decoration: underline; }

table { border-collapse: collapse; border-spacing: 0; }

.clear { clear: both; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

html { -webkit-text-size-adjust: none; }

body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, tahoma, arial, \5b8b\4f53, sans-serif; }

.grid-960 .wapper { width: 100%; min-width:960px;height: auto; margin: 0 auto; background: url(../images/bg-body-960.jpg) no-repeat center top; }

.grid-1180 .wapper { width: 100%; min-width:1180px;height: auto; margin: 0 auto; background: url(../images/bg-body-1180.jpg) no-repeat center top; }

.grid-1410 .wapper { width: 100%; min-width:1410px;height: auto; margin: 0 auto; background: url(../images/bg-body-1410.jpg) no-repeat center top; }

/*热门活动*/

.grid-960 .section { width: 960px;  margin: 0 auto;background-color:#eaf2ff; }

.grid-1180 .section { width: 1180px;  margin: 0 auto;background-color:#eaf2ff;}

.grid-1410 .section { width: 1410px;  margin: 0 auto;background-color:#eaf2ff;}

.title{padding:0 102px;height:70px;line-height:70px;font-size:24px;font-weight:normal;color:#fff;text-shadow: 0 3px #df2828, 3px 0 #df2828;background:#cc2223 url(../images/bg-title.jpg) no-repeat left top;}

.viewall:hover{text-decoration:none;}

.viewall{font-size:18px;;color:#fff;text-shadow: 0 3px #df2828, 3px 0 #df2828;float:right;}

.grid-1410 .title {padding:0 116px;background-image:url(../images/bg-title-1410.jpg);}

.grid-960 .contentwrap{width:800px;margin:0 auto;}

.grid-1180 .contentwrap{width:980px;margin:0 auto;}

.grid-1410 .contentwrap{width:1180px;margin:0 auto;}

.grid-960 .activity{width:826px;height:152px;overflow:hidden;margin:0 auto;position:relative;}

.grid-1180 .activity{width:1020px;height:192px;overflow:hidden;margin:0 auto;position:relative;}

.grid-1410 .activity{width:1230px;height:232px;overflow:hidden;margin:0 auto;position:relative;}

.grid-960 .activity ul{height:152px;overflow:hidden;}

.grid-1180 .activity ul{height:192px;overflow:hidden;}

.grid-1410 .activity ul{height:232px;overflow:hidden;}

.activity li img{display:block;width:100%;height:100%;}

.activity li{display:block;float:left;}

.grid-960 .activity li{width:250px;height:125px;overflow:hidden;margin:12px;}

.grid-1180 .activity li{width:300px;height:150px;overflow:hidden;margin:20px;}

.grid-1410 .activity li{width:360px;height:180px;overflow:hidden;margin:25px;}

/*js切换*/

.pg_left,.pg_right {position: absolute;z-index: 999;width: 35px;height: 50px;overflow: hidden;}

.pg_right {background: transparent url(../images/pg_right.png) no-repeat scroll 5px 7px;}

.pg_right:hover {background: transparent url(../images/hover.png) no-repeat scroll 0 0;}

.grid-960 .pg_right{top:75px;right:16px;margin-top:-25px;}

.grid-1180 .pg_right{top:95px;right:20px;margin-top:-25px;}

.grid-1410 .pg_right{top:115px;right:25px;margin-top:-25px;}

.pg_left {background: transparent url(../images/pg_left.png) no-repeat scroll 5px 7px;}

.pg_left:hover {background: transparent url(../images/hover.png) no-repeat scroll right 0;}

.grid-960 .pg_left{top:75px;left:13px;margin-top:-25px;}

.grid-1180 .pg_left{top:95px;left:20px;margin-top:-25px;}

.grid-1410 .pg_left{top:115px;left:25px;margin-top:-25px;}

jquery——左右按钮点击切换一组图片功能的更多相关文章

  1. js和jquery触发按钮点击事件

    js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...

  2. Jquery导航悬停点击及首页图片切换功能

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx. ...

  3. 淡入淡出(折叠效果)and点击切换背景图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery 滑动及点击切换效果

    效果图如下: 初始化 hover效果:滑动menuitem,‘首页’不变,字体颜色改变,有下划线展示. 即在动态添加boder-bottom,改变字体颜色颜色 .menuItem:hover{ bor ...

  5. 关于用phonegap 3.0+ 打包后sencha touch按钮点击切换动画延迟接近一秒的以及界面闪烁的解决方案

    android的webview对硬件加速的支持貌似很不理想,在开启硬件加速的情况下,css3这些需要调用硬件加速的样式会大幅拖慢html5的webapp,在htc的部分手机上还会因开启硬件加速而导致闪 ...

  6. Jquery实现按钮点击遮罩加载，处理完后恢复

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx. ...

  7. 2-微信小程序开发(开发界面说明,按钮点击切换显示内容)

    说一个功能,大家在用微信实现控制设备的时候,是不是都在为绑定设备发愁. 我看了很多厂家的微信控制,大部分都只是可以用微信给设备配网,但是没有做用微信绑定的. 一般做绑定都是用设备的MAC地址. 这里我 ...

  8. jquery 实现鼠标点击div盒子移动功能

    // Start 窗口的拖动 var _move=false; //移动标记 var _x,_y; //鼠标离控件左上角的相对位置 $(document).ready(function(){ $(&q ...

  9. jquery实现表格中点击相应行变色功能

    对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en ...

随机推荐

  1. .NET中那些所谓的新语法之三：系统预定义委托与Lambda表达式

    开篇:在上一篇中,我们了解了匿名类.匿名方法与扩展方法等所谓的新语法,这一篇我们继续征程,看看系统预定义委托(Action/Func/Predicate)和超爱的Lambda表达式.为了方便码农们,. ...

  2. 【大型网站技术实践】初级篇：搭建MySQL主从复制经典架构

    一.业务发展驱动数据发展 随着网站业务的不断发展,用户量的不断增加,数据量成倍地增长,数据库的访问量也呈线性地增长.特别是在用户访问高峰期间,并发访问量突然增大,数据库的负载压力也会增大,如果架构方案 ...

  3. 探索c#之storm的TimeCacheMap

    阅读目录: 概述 算法介绍 清理线程 获取.插入.删除 总结 概述 最近在看storm,发现其中的TimeCacheMap算法设计颇为高效,就简单分享介绍下. 思考一下如果需要一个带过期淘汰的缓存容器 ...

  4. MySQL实现嵌套集合模型

    MySQL实现嵌套集合模型 译文主要是介绍如何用MySQL来存储嵌套集合数据.在其中会增加一些自己的理解,也会删除掉一些自认为无用的废话. 这篇文章主要讲的是嵌套集合模型,所以邻接表不是本文的重点,简 ...

  5. Webstorm 10 for mac osx 注册机,序列号,kegen

    小菜最近get到mac体验机会,早就耳闻mac非常适合做开发,于是迫不及待的安装各种开发工具,不知不觉,轮到前端开发神器webstorm了,看了一下官网的价格,心拔凉拔凉的. 果断搜索注册机,搜到的结 ...

  6. Module-Zero之组织单元（OU）管理【新增】

    返回<Module Zero学习目录> 概览介绍 OrganizationUnit实体 OrganizationUnit管理者 公共用例 设置 概览介绍 组织单元(Organization ...

  7. struts1一:基本简介

    struts是开源框架.使用Struts的目的是为了帮助我们减少在运用MVC设计模型来开发Web应用的时间.如果我们想混合使用Servlets和JSP的优点来建立可扩展的应用,struts是一个不错的 ...

  8. C#事件

    事件(event),这个词儿对于初学者来说,往往总是显得有些神秘,不易弄懂.而这些东西却往往又是编程中常用且非常重要的东西.大家都知道windows消息处理机制的重要,其实C#事件就是基于window ...

  9. KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器

    无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...

  10. jQuery 2.0.3 源码分析Sizzle引擎 - 超级匹配

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 通过Expr.find[ type ]我们找出选择器最右边的最终seed种子合集 通过Sizzle.compile函数编译器 ...