jquery 圖片左右切換,一長條的顯示,點選左右移動。
阿新 • • 發佈:2018-12-19
菜鳥啊,想了一天才寫出來,唉。
ps: 生活無樂趣,程式碼更加無樂趣!
.hdjs{display:inline-block; width:100%; margin-top:4px; position: relative; height:101px; background: url("../images/2_05.png") repeat-x;} .hdjs_div{ width: 912px; height:101px; position: relative; margin:0 auto; overflow: hidden;} .hdjs_div .ful{ width: 100%; position: absolute; left: 0; top: 0; height:101px;} .hdjs_div .ful li{ width: 222px; height: 101px; float:left; background: url("../images/2_03.png") no-repeat; margin:0 3px;} .hdjs_div .ful li a{ width: 222px; height: 101px; display: block;} .hdjs_div .ful .spag{ float: left; margin-left:10px; margin-top:25px;} .hdjs_div .ful .divgr{ float: left; width: 130px; text-align: left; margin-left:10px;margin-top:25px;} .hdjs_div .ful .divgr p{ width: 100%; float: left;} .hdjs_div .ful .divgr .pa{font-family:"Arial";color:#f0275e; font-size: 10px; font-weight: bold;} .hdjs_div .ful .divgr .pb{color:#f0275e; font-size: 12px;} .hdjs_div .ful .divgr .pc{color:#9f9f9f; font-size: 12px;} .hdjs .next{ position: absolute; right: -10px; top: 27px; width: 43px; height: 49px; background: url("../images/pic.png") -40px -316px no-repeat;} .hdjs .nexta{position: absolute; right: -10px; top: 27px; width: 43px; height: 49px; background: url("../images/pic.png") -123px -316px no-repeat;} .hdjs .prev{ position: absolute; left: -10px; top: 27px; width: 43px; height: 49px; background: url("../images/pic.png") -0px -316px no-repeat;} .hdjs .preva{ position: absolute; left: -10px; top: 27px; width: 43px; height: 49px; background: url("../images/pic.png") -83px -316px no-repeat;}
// Author:sikey var hdlengt=$(".ful li").length;//獲取個數 var hdwidth=$(".ful li").width()+6;//獲取寬度 var hd=hdlengt*hdwidth;//寬度乘以個數 var wwidth=(hdlengt-4)*hdwidth;//個數減去顯示的4個在乘以寬度 $(".ful").width(hd)//獲取的寬度賦值給要顯示的寬度 var hdjs=$(".hdjs_div ul");//變數 if(hdjs.scrollLeft()==0){ //如果邊距為0 $(".next").remove();//本身刪除 $(".hdjs_div").parent().append("<a href='javascript:;' class='nexta'></a>")//新增一個標籤 } function tpgd(id){//函式名,左邊移動動畫,(其中id為值,從外面傳進來,這裡用來接收) hdjs.animate({ 'left':-228*id //需要移動多少畫素在乘以id的值 }) } $(".next").live("click",function(){ //點選事件 id-- //每次點選id減值 if(id==0){ // id如果等於0 $(this).remove(); // 本身刪除 $(".hdjs_div").parent().append("<a href='javascript:;' class='nexta'></a>")//新增一個標籤 } $(".preva").addClass("prev");//新增一個為prev的樣式 $(".prev").removeClass("preva");//刪除樣式 ii-- //每次點選ii減值 tpgd(id) //執行這個函式,(把id的值傳給函式) }) var id //命名一個變數 var ii=$(".ful li").index(); //ii變數 var ii=1 //ii為1 $(".prev").live("click",function(){ //點選事件 id=ii++ //id每次點選加一 if(hdwidth*id==wwidth){ //判斷語句,如果寬度乘以點選的個數的值等於wwidth $(this).remove(); //刪除本身 $(".hdjs_div").parent().append("<a href='javascript:;' class='preva'></a>") //新增標籤 //return false } $(".nexta").addClass("next"); //新增樣式 $(".next").removeClass("nexta"); //刪除樣式 tpgd(id) //執行這個函式,(把id的值傳給函式) })
<div class="hdjs"> <div class="hdjs_div"> <ul class="ful"> <li> <a href="#"> <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span> <div class="divgr"> <p class="pa">2009-08-24</p> <p class="pb">CROWN全場3~7折</p> <p class="pc">活動內容:crown全場38~498元</p> </div> </a> </li> <li> <a href="#"> <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span> <div class="divgr"> <p class="pa">2009-08-24</p> <p class="pb">CROWN全場3~7折</p> <p class="pc">活動內容:crown全場38~498元</p> </div> </a> </li> <li> <a href="#"> <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span> <div class="divgr"> <p class="pa">2009-08-24</p> <p class="pb">CROWN全場3~7折</p> <p class="pc">活動內容:crown全場38~498元</p> </div> </a> </li> <li> <a href="#"> <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span> <div class="divgr"> <p class="pa">2009-08-24</p> <p class="pb">CROWN全場3~7折</p> <p class="pc">活動內容:crown全場38~498元</p> </div> </a> </li> <li> <a href="#"> <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span> <div class="divgr"> <p class="pa">2009-08-24</p> <p class="pb">CROWN全場3~7折</p> <p class="pc">活動內容:crown全場38~498元</p> </div> </a> </li> <li> <a href="#"> <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span> <div class="divgr"> <p class="pa">2009-08-24</p> <p class="pb">CROWN全場3~7折</p> <p class="pc">活動內容:crown全場38~498元</p> </div> </a> </li> <li> <a href="#"> <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span> <div class="divgr"> <p class="pa">2009-08-24</p> <p class="pb">CROWN全場3~7折</p> <p class="pc">活動內容:crown全場38~498元</p> </div> </a> </li> </ul> </div> <a href="javascript:;" class="next"></a> <a href="javascript:;" class="prev"></a> </div>