jquery——左右按钮点击切换一组图片功能

>a>li>
<li><a href="Javascript:;"><img src="images/activity02-1410.jpg">a>li>
<li><a href="Javascript:;"><img src="images/activity03-1410.jpg">a>li>
<li><a href="Javascript:;"><img src="images/activity03-1410.jpg">a>li>
<li><a href="Javascript:;"><img src="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){
                var html = a.find("ul li").eq(i).html();
                a.find("ul").append("
"+html+"
");    
            }
            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);        
        }

4、问题

可能是jquery写的原因，加了浏览器缩放尺寸响应后点击切换按钮响应有延时。

1、用到图片

>a>li>
<li><a href="Javascript:;"><img src="images/activity02-1410.jpg">a>li>
<li><a href="Javascript:;"><img src="images/activity03-1410.jpg">a>li>
<li><a href="Javascript:;"><img src="images/activity03-1410.jpg">a>li>
<li><a href="Javascript:;"><img src="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("

css部分：

View Code

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4956293.html有问题欢迎与我讨论，共同进步。