基于jquery實現(xiàn)左右按鈕點擊的圖片切換效果
更新時間：2021年01月27日 09:48:08 投稿：lijiao
這篇文章主要介紹了基于jquery實現(xiàn)左右按鈕點擊的圖片切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
jQuery可以制作出與Flash媲美的動畫效果，這點絕對毋庸置疑，本文將通過實例演示一個左右按鈕點擊的圖片切換效果。
一、最終效果
二、功能分析
1、需求分析
點擊左邊pre按鈕，顯示前面三個圖片，點擊右邊的next按鈕，顯示后面的一組（三個）圖片。初始化只顯示next按鈕，到最后一組只顯示pre按鈕，中間過程兩按鈕都顯示。
2、html結(jié)構(gòu)分析
<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="images/activity01-1410.jpg"></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是整個幻燈的入口，后面會將其作為參數(shù)來調(diào)用幻燈功能。
兩個按鈕ps_pre和ps_next將添加click事件響應(yīng)點擊切換功能。
3、功能分析
因為左右切換都是三個為一組的切換，如果li總個數(shù)不是3的倍數(shù)時，需要增加li節(jié)點填滿。
//需要追加的li節(jié)點個數(shù)
var addli = 0;
//一組切換3個li
var num=3;
var lisize = a.find("ul li").size();//獲取li個數(shù)
//判斷需要添加的li節(jié)點數(shù)量
var reminder=lisize%num;
if(lisize%num!=0){addli = num-reminder;}
else{addli = 0;}
addlist();
上面是判斷得到需要追加的個數(shù)lisize，然后調(diào)用addlist追加。
addlist如下，從ul的第一個li開始復(fù)制，需要幾個就復(fù)制出幾個節(jié)點追加。節(jié)點追加完畢后重新計算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)});
}
現(xiàn)在準備工作已經(jīng)完成了。接下來就是給按鈕添加響應(yīng)事件。在幻燈切換時涉及到左右按鈕的顯示和隱藏，所以先說這個按鈕顯示功能，將此分裝成一個函數(shù)btnshow。
/***
參數(shù)說明：
now:當(dāng)前是第幾組，默認是0
c:總共有幾組
d:初始化時li的個數(shù)
e:每組顯示li個數(shù)
***/
function btnshow(now,c,d,e){
if(d<=e){//如果初始化時li的個數(shù)小于一組要顯示的數(shù)，則不顯示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是傳入的參數(shù)，也就是 #activity-slide。給它下面的所以的pre和next添加響應(yīng)。
向前一組，組數(shù)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>//初始化狀態(tài)顯示樣式判斷,放在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="images/activity01-1410.jpg"></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();
//判斷每次滾動數(shù)量
/*
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節(jié)點數(shù)量
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內(nèi)容還原初始值
a.find(".ps_next").show();//按鈕樣式初始化
a.find(".ps_pre").hide();
//判斷每次滾動數(shù)量
/*
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節(jié)點數(shù)量
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);
}
/***
參數(shù)說明：
now:當(dāng)前是第幾組，默認是0
c:總共有幾組
d:初始化時li的個數(shù)
e:每組顯示li個數(shù)
***/
function btnshow(now,c,d,e){
if(d<=e){//如果初始化時li的個數(shù)小于一組要顯示的數(shù)，則不顯示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;}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
本文給大家匯總了一些jQuery常用的方法，都是我們?nèi)粘ｍ椖恐薪?jīng)常會用到的，附上示例，有需要的小伙伴可以參考下。2016-03-03
這篇文章主要介紹了JQuery發(fā)送ajax請求時中文亂碼問題解決,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
Jquery通過Ajax訪問XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過Ajax訪問XML數(shù)據(jù)，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了jQuery的層級查找方式,結(jié)合實例形式分析了jQuery常用的三種層級查找的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
前不久做項目，要用到大量的頁面圓角的框塊，以前實現(xiàn)的時候都是用圖片做背景之類的方法，那種方法對于少數(shù)的還是比較可行的，但是當(dāng)涉及到整個項目都要用 到這樣的效果時就顯得不夠優(yōu)化和簡練了。2009-12-12
這篇文章主要介紹了jquery解決客戶端跨域訪問問題,jQuery.ajax()支持get方式的跨域，這其實是采用jsonp的方式來完成的，需要的朋友可以參考下2015-01-01
用戶注冊的表單往往是需要進行驗證的，否則會有一些不否合規(guī)則的數(shù)據(jù)入庫，后果會不堪設(shè)想，下面為大家詳細介紹下通過jquery是如何實現(xiàn)的，下面有個示例，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了jquery分頁優(yōu)化操作,在前文jQuery分頁顯示的基礎(chǔ)上實現(xiàn)了避免頻繁查詢的相關(guān)優(yōu)化操作技巧,需要的朋友可以參考下2019-08-08
本文給大家分享的是使用jQuery+php解決input超多的表單提交的思路和方法，非常的簡單實用，有需要的小伙伴可以參考下。2015-08-08
jQuery點擊導(dǎo)航欄選中更換樣式的實現(xiàn)代碼
這篇文章主要介紹了jQuery點擊導(dǎo)航欄選中更換樣式的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-01-01