*此處需注意relative 對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒有這個(gè)屬性，圖片將不可左右移動(dòng)* slideShow ul li float left *讓四張圖片左浮動(dòng)，形成；在新建的樣式表文件quotMyStylecss”文件中輸入如下代碼* padding0 margin0 *設(shè)置所有對(duì)像的內(nèi)邊距為0*body textaligncenter *設(shè)置頁面居中對(duì)齊*#photolist * 6張圖片的寬度包含寬；這樣lt！DOCTYPE html 動(dòng)態(tài)切換圖片 ul padding0margin0 li liststyle pic position relativewidth 400pxheight 400pxbackgroundcolorredmargin100px autobackgroundurl#39；if$index === 0 當(dāng)前為第一張輪播圖 quotbanquoteq$quotbanquotlength1addClassquotactivesiblingsquotbanquotremoveClassquotactivequot這里寫成你自動(dòng)切換的代碼，我這里只是一個(gè)無動(dòng)態(tài)切換效果的方法；然后控制父divbgIn的left屬性，讓這個(gè)divbgIn相對(duì)于它的父divbg中左右移動(dòng)而已你用chrome的審查元素就能看到的最外邊那個(gè)divbg則主要是控制z軸，讓它顯示在頁面下面 而這些設(shè)置好之后，用jquery的toggle函數(shù)；jquery手機(jī)觸屏左右滑動(dòng)切換欄目 function TouchSlide slideCellquot#slideBoxquot，titCellquotmyhd ulquot，開啟自動(dòng)分頁 autoPagetrue ，此時(shí)設(shè)置 titCell 為導(dǎo)航元素包裹層 mainCellquotbd ulquot，effectquotleftLoopquot，auto。

如果你要問原理， 關(guān)鍵點(diǎn)是 外層div是一個(gè)窗口， 控制好長寬， 設(shè)置overflow為hidden， 那么只有在此區(qū)域內(nèi)的內(nèi)容才會(huì)被顯示 內(nèi)容是一堆圖片， 通過js控制位置， 比如用relative定位， 通過css控制left， 就是移動(dòng)效果 如果要輪播；將javascript代碼替換為如下，jQueryquotscroolWarpquotslide titCellquothd ulquot， mainCellquotbd ulquot，effectquotleftquot，vis6，scroll6，autoPlaytrue，autoPagetrue；有這個(gè)標(biāo)簽但是有bug已經(jīng)被淘汰，直接用js；思路點(diǎn)擊左邊 1將第一個(gè)LI向左滑動(dòng)，滑動(dòng)的數(shù)值就是LI的寬度這里是用負(fù)marginleft來實(shí)現(xiàn)移動(dòng)2滑動(dòng)完成后，將這個(gè)LI插入到整個(gè)LI的最后一個(gè)實(shí)現(xiàn)無縫滾動(dòng)點(diǎn)擊右邊 1將最后一個(gè)LI插入到所有LI的第；用jquery使一個(gè)按鈕讓div左右移動(dòng)方法如下就是點(diǎn)擊“#anniu”，然后quot#caozuoquotdiv左右移動(dòng)，我的代碼左移了就不能移動(dòng)回來了 $documentreadyfunction 就是點(diǎn)擊“#anniu”，然后quot#caozuoquotdiv左右移；動(dòng)畫效果，圖片從右側(cè)飛入 quot#div_pic ul liquoteqindexanimateleftquot0quot，500 * 下面是可配置輪播動(dòng)畫代碼 fnslide=functionoptions var defaults= affect1， 1上下滾動(dòng)。

這是自己封裝的原生js方法，為了偷懶，用了電jqurey調(diào)用方法如下touchs_leftobject往左滑動(dòng)，touchs_rightobject往右滑動(dòng) touchs_topobject往上滑動(dòng) touchs_bottomobject往下滑動(dòng) 說明；執(zhí)行yidong函數(shù)5在js標(biāo)簽中，創(chuàng)建yidong函數(shù)，在函數(shù)內(nèi)，通過classcontent獲得div對(duì)象，使用animate方法讓div在1秒內(nèi)向左移動(dòng)100px6最后在瀏覽器打開testhtml文件，點(diǎn)擊按鈕，查看實(shí)現(xiàn)的效果；下面是可配置輪播動(dòng)畫代碼 fnslide=functionoptions var defaults= affect1， 1上下滾動(dòng) 2幕布式 3左右滾動(dòng)4淡入淡出 time 5000， 間隔時(shí)間 speed500， 動(dòng)畫快慢 dot_text；if$quot#leftquotcss#39width#39 == #39200px#39 quot#leftquotanimatewidth0，quotslowquotquot#hidequotval#39顯示#39else quot#leftquotanimatewidth200，quotslowquotquot#hidequotval#39隱藏#39。

可以使用CSS設(shè)置容器元素的寬度和高度，并設(shè)置overflow屬性為hidden，這樣可以隱藏容器元素之外的內(nèi)容2接下來，需要使用JavaScript編寫代碼，實(shí)現(xiàn)滑動(dòng)加載的功能可以使用jQuery或其他JavaScript庫實(shí)現(xiàn)，也可以使用原生JavaScript編寫。