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

- URL: https://justfly.idv.tw/jquery%e5%b0%8d%e6%87%89%e9%9b%bb%e8%85%a6%e8%b7%9f%e6%99%ba%e6%85%a7%e5%9e%8b%e6%89%8b%e6%a9%9f%e7%80%8f%e8%a6%bd%e5%99%a8%e7%9a%84%e6%bb%91%e5%8b%95banner/
- 日期: 2012-02-10
- 分類: WEB&RIA
- 標籤: iphone, javascript, jquery

我們很常會在購物網站上看到像是[這樣](http://www.brooksengland.com/)的圖片輪撥方式來做廣告或展示。

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

從零開始做始終不是我的解決style，站在前人的肩膀上才能看的更高更遠～於是就找到了[jQuery.flickSimple](https://github.com/makog/jQuery.flickSimple.js)跟[jsdeferred.js](https://github.com/cho45/jsdeferred)來做應用。

(圖片素材擷取自網路)

一般來說，只要有數字的選擇就足夠（在加上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');
			});
		});
	});
}
```

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