基于jquery實現左右按鈕點擊的圖片切換效果

2024-05-06 16:25:03

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了基于jquery實現左右按鈕點擊的圖片切換效果，內容講解很豐富，感興趣的小伙伴們可以參考一下

jQuery可以制作出與Flash媲美的動畫效果，這點絕對毋庸置疑，本文將通過實例演示一個左右按鈕點擊的圖片切換效果。

一、最終效果

二、功能分析

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="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是整個幻燈的入口，后面會將其作為參數來調用幻燈功能。

兩個按鈕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="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();

//判斷每次滾動數量

/*

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;}