基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
jQuery可以制作出與Flash媲美的動(dòng)畫效果,這點(diǎn)絕對(duì)毋庸置疑,本文將通過實(shí)例演示一個(gè)左右按鈕點(diǎn)擊的圖片切換效果。
一、最終效果
二、功能分析
1、需求分析
點(diǎn)擊左邊pre按鈕,顯示前面三個(gè)圖片,點(diǎn)擊右邊的next按鈕,顯示后面的一組(三個(gè))圖片。初始化只顯示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是整個(gè)幻燈的入口,后面會(huì)將其作為參數(shù)來調(diào)用幻燈功能。
兩個(gè)按鈕ps_pre和ps_next將添加click事件響應(yīng)點(diǎn)擊切換功能。
3、功能分析
因?yàn)樽笥仪袚Q都是三個(gè)為一組的切換,如果li總個(gè)數(shù)不是3的倍數(shù)時(shí),需要增加li節(jié)點(diǎn)填滿。
//需要追加的li節(jié)點(diǎn)個(gè)數(shù) var addli = 0; //一組切換3個(gè)li var num=3; var lisize = a.find("ul li").size();//獲取li個(gè)數(shù) //判斷需要添加的li節(jié)點(diǎn)數(shù)量 var reminder=lisize%num; if(lisize%num!=0){addli = num-reminder;} else{addli = 0;} addlist();
上面是判斷得到需要追加的個(gè)數(shù)lisize,然后調(diào)用addlist追加。
addlist如下,從ul的第一個(gè)li開始復(fù)制,需要幾個(gè)就復(fù)制出幾個(gè)節(jié)點(diǎn)追加。節(jié)點(diǎn)追加完畢后重新計(jì)算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)在準(zhǔn)備工作已經(jīng)完成了。接下來就是給按鈕添加響應(yīng)事件。在幻燈切換時(shí)涉及到左右按鈕的顯示和隱藏,所以先說這個(gè)按鈕顯示功能,將此分裝成一個(gè)函數(shù)btnshow。
/*** 參數(shù)說明: now:當(dāng)前是第幾組,默認(rèn)是0 c:總共有幾組 d:初始化時(shí)li的個(gè)數(shù) e:每組顯示li個(gè)數(shù) ***/ function btnshow(now,c,d,e){ if(d<=e){//如果初始化時(shí)li的個(gè)數(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為負(fù)幾倍的組寬(即3倍的(li寬度+margin寬度)),然后顯示對(duì)于按鈕即可。
向后滑動(dòng)一組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); }
三、實(shí)例代碼
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">熱門活動(dòng)</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> //首頁圖片滾動(dòng)切換 (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(); //判斷每次滾動(dòng)數(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é)點(diǎn)數(shù)量 var reminder=lisize%num; if(lisize%num!=0){addli = num-reminder;} else{addli = 0;} addlist(); //點(diǎn)擊滾動(dòng)事件 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(); //判斷每次滾動(dòng)數(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é)點(diǎn)數(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)前是第幾組,默認(rèn)是0 c:總共有幾組 d:初始化時(shí)li的個(gè)數(shù) e:每組顯示li個(gè)數(shù) ***/ function btnshow(now,c,d,e){ if(d<=e){//如果初始化時(shí)li的個(gè)數(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; } /*熱門活動(dòng)*/ .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;}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕切換圖片
- 使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換
- jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享
- jQuery幻燈片特效代碼分享 鼠標(biāo)滑過按鈕時(shí)切換(2)
- Jquery幻燈片特效代碼分享?鼠標(biāo)點(diǎn)擊按鈕時(shí)切換(1)
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
- jquery實(shí)現(xiàn)隱藏與顯示動(dòng)畫效果/輸入框字符動(dòng)態(tài)遞減/導(dǎo)航按鈕切換
- jquery仿QQ商城帶左右按鈕控制焦點(diǎn)圖片切換滾動(dòng)效果
- jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化
相關(guān)文章
用jquery與css打造個(gè)性化的單選框和復(fù)選框
利用jquery和css打造個(gè)性化的單選框和復(fù)選框,喜歡的朋友可以參考下。2010-10-10基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼,需要的朋友可以參考下2023-05-05jquery判斷對(duì)象是否為空并遍歷對(duì)象的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨query判斷對(duì)象是否為空并遍歷對(duì)象的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07easyui-datagrid開發(fā)實(shí)踐(總結(jié))
本篇文章主要介紹了easyui-datagrid開發(fā)實(shí)踐(總結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08jQuery ajax在GBK編碼下表單提交終極解決方案(非二次編碼方法)
當(dāng)jquery ajax在utf-8編碼下(頁面utf-8,接收utf-8),無任何問題??梢哉ost、get,處理頁面直接獲取正確的內(nèi)容。2010-10-10jQuery 選擇器用法實(shí)例分析【prev + next】
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實(shí)例形式分析了jQuery選擇器prev 與 next基本功能、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05jQuery實(shí)現(xiàn)延遲跳轉(zhuǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)延遲跳轉(zhuǎn)的方法,涉及jQuery中setTimeout方法延遲觸發(fā)的使用技巧,需要的朋友可以參考下2015-06-06