jQuery仿新浪游戲圖片幻燈片切換代碼



104 415 139



特效描述:jQuery 圖片幻燈片切換,jQuery游戲幻燈片,新浪幻燈片,圖片幻燈片,圖片切換

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-plugin-slide.js"></script>

2. HTML代碼

<br><center>
<div class ='Homeslide' >
	<div class ='Homeslide_bigwrap'>
		<div class='Homeslide_hand0'></div>
		<div class='Homeslide_hand1'></div>
		<a target='_blank' class='Homeslide_bigpicdiv_mask'>loading...</a>
		<div class='Homeslide_bigpicdiv'>
			<a href='#' target='_blank'><img src=""></a>
		</div>
		<div class='Homeslide_detail'>
			<p>loading...</p>
			<div class='Homeslide_ralate'>loading...</div>
		</div>
	</div>
	<div class='Homeslide_thumb'>
		<ul>loading...</ul>
	</div>
</div>
</center>
<script type="text/javascript">
//data
var home_slide_data = 
[
	{"title":"哈哈","url":"http:\/\/www.dijiuzhanzhang.com\/","subtitle":"車模自爆沉迷LOL","image":"images\/mB6w-fxesftz6773752.jpg","thumb":"images\/vhPm-fxesfuc3549394.jpg","summary":"2015年CJ即將開幕在即,雖然由于種種新規,我們可能再也見不到種種福利","related_title_1":"海賊女帝寫真","related_image_1":"http:\/\/www.dijiuzhanzhang.com\/","related_title_2":"女星代言手游","related_image_2":"http:\/\/www.dijiuzhanzhang.com\/","mark":"0"},
	{"title":"App Store\u7f16\u8f91\u63a8\u8350\u516d\u6708\u6700\u4f73\u6e38\u620f\u76d8\u70b9","url":"http:\/\/www.dijiuzhanzhang.com\/","subtitle":"\u516d\u6708\u6700\u4f73\u624b\u6e38\u76d8\u70b9","image":"images\/Hv1z-fxesfty0407358.jpg","thumb":"images\/T4s2-fxesssr5451139.jpg","summary":"\u6bcf\u6708App Store\u7684\u7f16\u8f91\u90fd\u4f1a\u5728\u5f53\u6708\u6700\u4ee4\u4eba\u96be\u5fd8\u3001\u5236\u4f5c\u6700\u7cbe\u826f\u7684\u65b0\u4f5c\u4e2d\u627e\u51fa\u6700\u68d2\u7684\u6e38\u620f\uff0c\u4e0b\u9762\u8ba9\u6211\u4e00\u8d77\u6765\u770b\u770b\u6709\u54ea\u4e9b\u6e38\u620f\u5165\u9009\u516d\u6708\u6700\u4f73\u5462\uff1f","related_title_1":"\u5200\u950b\u9177\u8dd1","related_image_1":"http:\/\/www.dijiuzhanzhang.com\/","related_title_2":"\u8f90\u5c04\u907f\u96be\u6240","related_image_2":"http:\/\/www.dijiuzhanzhang.com\/","mark":"0"},
	{"title":"\u9b54\u517d\u4e16\u754c\u7535\u5f71\u9884\u544a\u7247 7\u670811\u65e5\u4eae\u76f8\u5723\u5730\u4e9a\u54e5\u52a8\u6f2b\u5c55","url":"http:\/\/www.dijiuzhanzhang.com\/","subtitle":"\u9b54\u517d\u7535\u5f71\u5468\u516d\u516c\u5e03","image":"images\/lwuY-fxesfty0408487.jpg","thumb":"images\/vfi3-fxesfuc3551167.jpg","summary":"\u6765\u81ea\u4e8eEntertainment Weekly\u7684\u6700\u65b0\u6d88\u606f\uff0c\u9b54\u517d\u4e16\u754c\u7535\u5f71\u5c06\u4e8e7\u670811\u65e5\u7684\u5723\u5730\u4e9a\u54e5\u56fd\u9645\u52a8\u6f2b\u5c55\u4e0a\u516c\u5e03\u3002","related_title_1":"\u9ed1\u6697\u4e4b\u95e8\u6d77\u62a5","related_image_1":"http:\/\/www.dijiuzhanzhang.com\/","related_title_2":"\u5bfc\u6f14COS\u517d\u4eba","related_image_2":"http:\/\/www.dijiuzhanzhang.com\/","mark":"0"},
	{"title":"G\u676f\u6e38\u620f\u5973\u795e\u5353\u6bd3\u5f64\u8fd1\u65e5\u7ed9\u529b\u79c1\u7167 \u5f15\u5b85\u7537\u75af\u72c2\u55b7\u8840","url":"http:\/\/www.dijiuzhanzhang.com\/","subtitle":"\u6e38\u620f\u5973\u795e\u7ed9\u529b\u79c1\u7167","image":"images\/-Gtx-fxesftz6781939.jpg","thumb":"images\/vJpT-fxesftz6781941.jpg","summary":"\u8fd1\u65e5\u6211\u4eec\u7684\u5973\u795e\u53c8\u4e3a\u5b85\u7537\u4eec\u653e\u9001\u4e86\u4e00\u5927\u6ce2\u7ed9\u529b\u79c1\u7167\uff0c\u5f15\u5f97\u5b85\u7537\u73a9\u5bb6\u53e3\u6c34\u6d9f\u6d9f\uff0c\u5c0f\u4f19\u4f34\u4eec\u968f\u7740\u5c0f\u7f16\u4e00\u8d77\u6765\u6b23\u8d4f\u5427\uff01","related_title_1":"\u4ee3\u8a00\u6e38\u620f\u8d70\u7ea2","related_image_1":"http:\/\/www.dijiuzhanzhang.com\/","related_title_2":"\u5b85\u7537\u7f8e\u80f8\u5973\u795e","related_image_2":"http:\/\/www.dijiuzhanzhang.com\/","mark":"0"},
	{"title":"\u4e00\u5468\u624b\u6e38\u5f00\u6d4b\u9884\u544a\uff1a\u300a\u4e5d\u9634\u771f\u7ecf\u300b\u5220\u6863\u6d4b\u8bd5","url":"http:\/\/www.dijiuzhanzhang.com\/","subtitle":"\u7f8e\u56fd\u5927\u7247\u6539\u7f16\u624b\u6e38","image":"images\/znaY-fxesfty0426946.jpg","thumb":"images\/xOeg-fxesfuc3555437.jpg","summary":"\u53c8\u5230\u4e86\u4e00\u5468\u5f00\u6d4b\u624b\u6e38\u63a8\u8350\u7684\u65f6\u95f4\uff0c\u4f60\u51c6\u5907\u597d\u4e86\u5417\uff01\u672c\u5468\u5f00\u6d4b\u7684\u624b\u6e38\u79cd\u7c7b\u7e41\u591a\uff0c\u6709\u89d2\u8272\u626e\u6f14\u7c7b\u4e5d\u9634\u771f\u7ecf\u548c\u82cd\u7a79\u53d8","related_title_1":"\u4e5d\u9634\u771f\u7ecf","related_image_1":"http:\/\/www.dijiuzhanzhang.com\/","related_title_2":"\u7edd\u5730\u6218\u8b66","related_image_2":"http:\/\/www.dijiuzhanzhang.com\/","mark":"0"},
	{"title":"\u300a\u5251\u6e7e\u4f20\u5947\u300b\u516c\u5e03\u5168\u65b0\u6e38\u620f\u6f14\u793a \u73a9\u5bb6\u53ef\u81ea\u5df1\u5efa\u5730\u4e0b\u57ce","url":"http:\/\/www.dijiuzhanzhang.com\/","subtitle":"\u5251\u6e7e\u4f20\u5947\u6700\u65b0\u89c6\u9891","image":"images\/_UYH-fxesfty0422934.jpg","thumb":"images\/ohtY-fxesssr5454722.jpg","summary":"\u300a\u5251\u6e7e\u4f20\u5947\u300b\u4eca\u5929\u516c\u5e03\u4e86\u5168\u65b0\u7684\u6e38\u620f\u89c6\u9891\uff0c\u5c55\u793a\u4e86\u6e38\u620f\u4e2d\u6781\u4e3a\u7075\u6d3b\u7684\u6218\u5f79\u521b\u5efa\u5de5\u5177\u548c\u526f\u672c\u5927\u5e08\u6e38\u620f\u8fc7\u7a0b","related_title_1":"\u65b0\u6e38\u620f\u6a21\u5f0f","related_image_1":"http:\/\/www.dijiuzhanzhang.com\/","related_title_2":"\u5b9e\u673a\u6e38\u620f\u89c6\u9891","related_image_2":"http:\/\/www.dijiuzhanzhang.com\/","mark":"0"},
	{"title":"\u300a\u6211\u7684\u4e16\u754c\uff1a\u6545\u4e8b\u6a21\u5f0f\u300b\u5ba3\u4f20\u89c6\u9891\u9996\u66dd","url":"http:\/\/www.dijiuzhanzhang.com\/","subtitle":"\u6211\u7684\u4e16\u754c\u6545\u4e8b\u6a21\u5f0f","image":"images\/ui2t-fxesftz6772647.jpg","thumb":"images\/nvsq-fxesftz6772653.jpg","summary":"\u300a\u6211\u7684\u4e16\u754c\u300b\u53ef\u8c13\u65f6\u4e0b\u6700\u70ed\u95e8\u7684\u6e38\u620f\uff0c\u51ed\u501f\u7740\u8fd9\u6b3e\u795e\u4f5c\uff0cMojang \u540d\u58f0\u5927\u632f\uff0c\u5fae\u8f6f\u751a\u81f3\u65a5\u5de8\u8d44\u5c06\u5176\u6536\u8d2d","related_title_1":"\u767b\u5f55WIN10","related_image_1":"http:\/\/www.dijiuzhanzhang.com\/","related_title_2":"\u94f6\u9b42\u4e71\u5165","related_image_2":"http:\/\/www.dijiuzhanzhang.com\/","mark":"0"},
	{"title":"哈哈","url":"http:\/\/www.dijiuzhanzhang.com\/  ","subtitle":"\u519b\u653f\u6218\u7565\u624b\u6e38\u66dd\u5149","image":"images\/fcRo-fxesfuc3549534.jpg","thumb":"images\/JHpf-fxesftz6773913.jpg","summary":"\u4e71\u4e16\u4e89\u9738\uff0c\u91d1\u6208\u94c1\u9a6c\uff0c\u6562\u95ee\u8c01\u80fd\u4e00\u7edf\u5c71\u6cb3\uff1f\u5982\u4eca\uff0c\u65b0\u7684\u5386\u53f2\u5373\u5c06\u7531\u4f60\u4e66\u5199\uff0c\u519b\u653f\u6218\u7565\u624b\u6e38\u300a\u7387\u571f\u4e4b\u6ee8\u300b\u5373\u5c06\u5c01\u6d4b\uff01","related_title_1":"\u9ad8\u901f\u6e38\u620f\u4e0b\u8f7d","related_image_1":"http:\/\/www.dijiuzhanzhang.com\/","related_title_2":"\u66f4\u591a\u624b\u6e38\u8d44\u8baf","related_image_2":"http:\/\/www.dijiuzhanzhang.com\/","mark":"0"}
]; 
  //console.log(home_slide_data);
//實例化...................................
$('.Homeslide').homeslide(home_slide_data,true,3000);
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 漸隱切換 淡出淡進 淡出 淡進 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片淡出淡進 圖片淡出 圖片淡進 帶縮略圖的幻燈片 圖片滾動 圖片滾動條 純圖片輪播 圖片輪播 選項卡自動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子