當前位置：首頁 » 手機壁紙 » js手機圖片滑動
擴展閱讀
怎麼在曉黑板上傳手機圖片 2024-11-27 20:28:00
濕氣重熏艾熏哪個部點陣圖片 2024-11-27 20:27:05
早晨好的動態圖片最新版 2024-11-27 20:26:26

js手機圖片滑動

發布時間: 2024-07-13 10:31:02

A. js鍥劇墖宸﹀彸婊氬姩 鎬庝箞寮 鏈夋病妗堜緥浠ｇ爜 奼傚府蹇

1.jquery.imgScroll.js

;(function($){$.fn.extend({"imgScroll":function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:"slide",thumbNowClass:'on',thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{});varimgLen=$(object.scrollImgBox).length;varimgNum=0;vartabNum=0;varnowIndex=0;varindex;varscrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));functionchangeEffectNext(){if(object.changeType=='slide'){if(imgNum<imgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({'margin-left':0});imgNum=1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum<imgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum<imgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}};functionchangeEffectPrev(){if(object.changeType=='slide'){if(imgNum>0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({'margin-left':-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum>0){tabNum--}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum>0){imgNum--}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){vars=setInterval(changeEffectNext,object.changeTime);$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime);});$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)});$(object.botPrev).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)});$(object.botNext).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})};$(object.botNext).click(function(){changeEffectNext()});$(object.botPrev).click(function(){changeEffectPrev()});functionchangesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass);$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass);if(object.changeType=='slide'){$(object.scrollBox).animate({'margin-left':-scrollWid*index})}if(object.changeType=='fadein'){$(object.scrollImgBox).eq(index).fadeIn('slow');$(object.scrollImgBox).eq(index).siblings().fadeOut('slow')}imgNum=index;tabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){varindex=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){varindex=$(this).index();changesmallImg(index)})}}})})(jQuery);

2.html緇撴瀯

a,.lbPeo{-webkit-transition:all.2sease-in-out0s;-o-transition:all.2sease-in-out0s;-moz-transition:all.2sease-in-out0s;-ms-transition:all.2sease-in-out0s;transition:all.2sease-in-out0s;}
.lbCon{margin-top:33px;margin-bottom:37px;position:relative;}
.lbBtn{display:block;position:absolute;top:0;width:40px;height:143px;border:1pxsolid#D7D2CA;background:url('../../../images/special/140801/ctr_prev.png')no-repeatcentercenter;}
.lbPrev{left:0}.lbNext{right:0;background-image:url('../../../images/special/140801/ctr_next.png')}
.lbBtn:hover{background-color:#ddd;}
.lbBox{width:900px;height:145px;margin-left:50px;overflow:hidden;position:relative;}
.lbList{width:1000%;}
.lbBoxul{float:left}
.lbBoxli{float:left;width:150px;height:145px;overflow:hidden;}
.lbPeo{text-align:center;line-height:18px;font-family:"寰杞闆呴粦";color:#333}
.lbPeoimg{display:block;border:1pxsolid#ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}
.lbPeoh5{font-weight:bold;font-size:12px;padding-top:5px;*padding-top:0}
.lbPeoh6{font-size:12px;}
.lbBoxlia:hover{text-decoration:none}
.lbBoxlia:hover.lbPeo{color:#ff9600}
<!--浜虹墿-->
<divclass="lbConcomWithclearfix">
<divclass="lbBox">
<divclass="lbList">
<ul>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
</ul>
<ul>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ2綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉2澶х孩</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>鏉庡ぇ綰</h5>
<h6>澶у叕鎶ュ壇紺鵑暱鍏兼墽琛屾葷紪杈</h6>
</div>
</a></li>
</ul>
</div>
</div>
<ahref="javascript:;"class="lbBtnlbPrev"></a>
<ahref="javascript:;"class="lbBtnlbNext"></a>
</div>


3.欏甸潰璋冪敤錛

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="js/jquery.imgScroll.js"></script>(涓婇潰閭ｄ釜js)

$('.lbCon.lbBox.lbList').imgScroll({
firstDiv:'.lbCon.lbBox',
scrollBox:'.lbCon.lbBox.lbList',
scrollImgBox:'.lbCon.lbBoxul',
botPrev:'.lbCon.lbPrev',
botNext:'.lbCon.lbNext',
changeType:"slide",
thumbNowClass:'on',
thumbOverEvent:true,
changeTime:5000,
ImgBoxMar:0,
flag:false
});

4.鑷充簬榧犳爣婊戣繃 鏄劇ず宸﹀彸鎸夐挳,鍙浠ヨ繖涔堝啓錛堟濊礬:css榛樿ら殣鈃忓乏鍙蟲寜閽錛岄紶鏍囨粦榪囨樉紺哄乏鍙蟲寜閽錛屽垝鍑洪殣鈃忥紝闇瑕佸紩鍏jquery.js錛

$(function(){
$(".wj_jdt_1").bind("onmouseover",function(){
$(".ctr_btn").show();
}).bind("onmouseout",function(){
$(".ctr_btn").hide();
})
})

澶т綋鏄榪欎箞涓鎰忔濓紝鑷充簬鎬庝箞寤朵幾鍦ㄤ綘

B. 奼俲s涓鎺掑氬紶鍥劇墖鍚戜笂婊氬姩浠ｇ爜錛佷笉鏄鍗曞紶鐨勬槸澶氬紶鐨勶紒

鍋囪句綘瑕佹粴鍔ㄧ殑鍥劇墖鐨剗d鏄"pic1"-"picn" n>=1

function Slide()
{
for 錛坕=1;i<=n;i++) //n鏄鍥劇墖鏁
{
idd="pic"+i; //鐢熸垚鍥劇墖ID
toppx=parseInt(document.getElementById(idd).style.top.replace('px', '')); //鑾峰彇鍥劇墖top灞炴э紝騫跺幓鎺夊睘鎬т箣鍚庣殑px錛屽苟杞鎹㈡垚鏁村瀷鍙橀噺
toppx--; // top-1
if 錛坱oppx==???) //???鏄涓涓鏁板瓧錛屽綋鍥劇墖瀹屽叏婊氬嚭鏄劇ず鑼冨洿錛屽氨鎶婂浘鐗囩殑top鍙樻垚涓涓鍥劇墖緹(澶氳宲ic)涓嬫柟鐨勪綅緗錛屽疄鐜板驚鐜婊氬姩
{
toppx=???; //鍥劇墖緹ょ殑涓嬫柟鐨勪綅緗
}
document.getElementById(idd).style.top=toppx+'px'; //鏂扮殑top鍊奸佸洖鍥劇墖錛屽疄鐜頒笂婊
}
}

鍙﹀栬板緱錛岃繖鏍峰啓錛岄渶瑕佹妸鍥劇墖鐨則op灞炴у啓鍦╤tml閲岄潰錛屽啓鍦╟ss閲岄潰鏄璇諱笉鍒扮殑錛屼絾鏄榪欐牱鍐欓伩鍏嶄簡涓嶅悓嫻忚堝櫒涓鑾峰彇css涓灞炴х殑鏂規硶涓嶅悓鐨勯棶棰橈紝鏈夊埄鏈夊紛銆

褰撻渶瑕佹粴鍔ㄦ椂鎵ц岋細s=setInterval('Slide()',50);
褰撻渶瑕佸仠姝㈡粴鍔ㄦ椂鎵ц岋細window.clearInterval(s);

閱讀全文

與js手機圖片滑動相關的內容

友情鏈接

本站內容整理源於互聯網，如有問題請聯系解決。
Copyright design: www.imagebunk.com since 2022