body{ background: #f2f2f2; } #box{ position: relative; } #next{ width:50%;height:500px; position: absolute; left:50%; } #last{ width:50%;height:500px; position: absolute; } #btn-group{ height: 40px; overflow: hidden; } #list{ list-style: none; position: absolute; } #list>li{ list-style: none; float: left; position: relative; } #main{ margin-top: 20px; }
javascript
function Ugirl(url,imgNum){ var aBtn=document.getElementsByTagName('button'); $('#list').css('width',(imgNum*(52))+'px'); var str=url; var index=0; for(i=0;i<str.length;i++){ if(str.slice(i-1,i)=='('){ index=i; } } var a=str.slice(0,index); var b=str.slice(index); //分割url字符串 for(j=1;j<=imgNum;j++){ var $btn = $('<li><button>'+j+'</button></li>'); $btn.appendTo($('#list')); } aBtn[0].className='btn btn-danger'; //按钮初始化设置 //手指点击事件 $('#box div').click(function(){ if($(this).attr('id')=='next'){//下一个 if($('.btn-danger') .html()==imgNum){ alert('到底了哦'); return false; } liWidth=44; liWidth2=52; $('.btn-danger').removeClass().addClass('btn btn-primary') .parent().next().children().removeClass().addClass('btn btn-danger'); }else if($(this).attr('id')=='last'){//上一个 if($('.btn-danger') .html()==1){ alert('到顶了哦'); return false; }else{ $('.btn-danger').removeClass().addClass('btn btn-primary') .parent().prev().children().removeClass().addClass('btn btn-danger'); liWidth=-44; liWidth2=-52; } }else{ return false; }; //个位数按钮和10位数按钮宽度不同。所以设置两个 if($('.btn-danger') .html()<=10){ $('#list').animate({left:'-='+liWidth+'px'},400); }else if($('.btn-danger') .html()>10){ $('#list').animate({left:'-='+liWidth2+'px'},400); } //大图切换 $('img').fadeOut(200); setTimeout(function(){ $('img').attr('src',a+$('.btn-danger') .html()+b); },220) $('img').fadeIn(300); }); //选项按钮点击 $('button').click(function(){ $('button').attr('class','btn btn-primary'); $(this).attr('class','btn btn-danger'); var moveLength=-$(this).parent().position().left+15; $('#list').animate({left:moveLength+'px'},400); $('img').attr('src',a+$('.btn-danger') .html()+b); }); //跳转按钮点击 $('.btn-default').click(function(){ var s=$('#num').val(); if(s<1||s>imgNum){ return false; alert('没有那么多哦') }//极限设置 var pageNum=$('.btn-danger') .html(); $('img').attr('src',a+s+b); $('#list').children().children().removeClass().addClass('btn btn-primary'); $(aBtn[s-1]).removeClass().addClass('btn btn-danger'); var moveLength=-$(aBtn[s-1]).parent().position().left+15; $('#list').animate({left:moveLength+'px'},400); }) } $(function(){ Ugirl('img/wenjing/wenjing ().jpg',65); })//在其它页面也引入了Ugirl函数后，就可以直接调用直接调用