[jquery]對應電腦跟智慧型手機瀏覽器的滑動banner

Posted on 由
LINEで送る
[`evernote` not found]

我們很常會在購物網站上看到像是這樣的圖片輪撥方式來做廣告或展示。
通常這樣的方式我們會用flash或javaScript配合css來實現。但是隨著智慧型手機的普及，客戶也跟著一起升級。單純的輪撥已經不能夠被滿足，還必須更直覺的被使用！這次的要求就是希望在電腦上可以用滑鼠滑動圖片（或是網頁）就像在iphone等智慧型手機上用手指滑動一樣的效果。

從零開始做始終不是我的解決style，站在前人的肩膀上才能看的更高更遠～於是就找到了jQuery.flickSimple跟jsdeferred.js來做應用。

(圖片素材擷取自網路)

一般來說，只要有數字的選擇就足夠（在加上setinterval就可以有輪撥效果）。但是這次還必須多加上主題的選擇，因此，就有需要在下面多加上按鈕供使用者選擇。然後最直覺的方式當然是在同一html中分div來放不同的主題，在按下logo選擇時做淡入淡出跟div的top的設定。不過我是希望可以分開以減少loading,畢竟這全部都是圖檔。
所以，我在主頁上放了一個div來讀取各個主題的子網頁。

這麼一來，卻又碰到ie不相容的問題！就必須在js中做一下判斷：

if (window.attachEvent){
	window.attachEvent("onload", function(){
		Deferred.define();
		setMain('game/g1.html?' + new Date().getTime());
 
		$('#peo_box a').click(function() {
			var index = $(this).attr("href").match(/#([0-9]+)/)[1];
			setMain('game/g'+index+'.html',true);
			return false;
		});
	}, false);
}else{
	window.addEventListener("load", function(){
		Deferred.define();
		setMain('game/g1.html?' + new Date().getTime());
 
		$('#peo_box a').click(function() {
			var index = $(this).attr("href").match(/#([0-9]+)/)[1];
			setMain('game/g'+index+'.html',true);
			return false;
		});
	}, false);
}

jQuery的load()也不是用於ie，原本的setMain()就變得不適用＠＠

function setMain(url,isClick){
	next(function () {
		if(isClick){
			$("#main").fadeOut("slow")
			return wait(0.5);
		}
	}).
	next(function () {
		$("#main").load(url,function(){
			next(function () {
				mainInit();
			}).
			next(function () {
				$("#main").fadeIn('slow');
			});
		});
	});
}

改成這個樣子：

function setMain(url,isClick){
	next(function () {
		if(isClick){
			$("#main").fadeOut("slow")
			return wait(0.5);
		}
	}).
	next(function () {
		$.get(url, function (data) { 
		    data = '"' + data + '"';    
		    $("#main").html(data);
		    var newHTML = $('#main').html();
		    $('#main').html(newHTML.substr(1,newHTML.length-2));
		    next(function () {
				mainInit();
			}).
			next(function () {
				$("#main").fadeIn('slow');
			});
		});
	});
}

想一想這種方式還有很多的應用可以玩，就看看以後的案子還能讓他變出多少新花樣啦～