利用jquery實現scrollpic旅游網站幻燈片切換



28 111 38



特效描述:利用jquery實現 scrollpic 旅游網站 幻燈片切換,利用jquery實現scrollpic旅游網站幻燈片切換

代碼結構

1. 引入CSS

<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/travel.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollpic.js" type="text/javascript"></script>

3. HTML代碼

<div class="scrollMap" id="scrollpic00">
	<span class="slidePre"><a href="javascript:void(0);" title="上一頁"></a></span>
	<div class="picWrap">
		<ul>
			<li class="show"><a href="#"><img src="images/img/ipd-1.jpg" alt="<惠州碧桂園十里銀灘酒店“180度海景”2-5日自由行>在房間里享海景" /></a></li>
			<li><a href="#"><img src="images/img/ipd-2.jpg" alt="<昆明+大理+麗江6日超值雙飛跟團游>全程四星酒店住宿,兩晚升級五星酒店,贈印象麗江" /></a></li>
			<li><a href="#"><img src="images/img/ipd-3.jpg" alt="<深圳東部華僑城瀑布酒店2日自由行>含2日雙谷門票" /></a></li>
			<li><a href="#"><img src="images/img/ipd-4.jpg" alt="<千島湖綠城度假酒店+中心湖區2日自駕游>五星酒店湖景房,含2張中心湖區門票(含船票)" /></a></li>
			<li><a href="#"><img src="images/img/ipd-5.jpg" alt="[早訂立減]<歐洲四國10日7晚豪華跟團游>入內參觀巴黎圣母院、楓丹白露御花園、盧浮宮" /></a></li>
		</ul>
	</div>
	<div class="sliderTextBox">
		<div class="sliderTextBg"></div>
		<div class="sliderShowText">
			<div class="sliderTextAll">
				<div class="sliderText">
					<h2 class="sLine"><b>第1天 重慶--三亞</b></h2>
					<p>重慶江北機場乘坐客機降臨美麗的鹿城——三亞,接機后途觀鹿城美景抵達酒店入住。</p>
				</div>
				<div class="sliderTxtBot">
					<p><em class="c_c1c1">交通:</em> 巴士 、</p>
					<p><em class="c_c1c1">酒店:</em> 當地標準</p>
					<p><em class="c_c1c1">用餐:</em> 午餐 晚餐</p>
					<p><em class="c_c1c1">景點:</em> 奧林匹克大道公園、 沙雕大世界、 北戴河深海海產養殖基地</p>
				</div>
			</div>
			<div class="sliderTextAll">
				<div class="sliderText">
					<h2 class="sLine"><b>第2天 三亞--瓊海--陵水縣</b></h2>
					<p>早餐后前往紅色娘子軍故鄉-瓊海市,外觀亞洲論壇永久性會址景區、乘船游覽載入吉尼斯紀錄的分隔河、海最狹長的沙灘半島【博鰲玉帶灘】(游覽約50分鐘);游覽“純海南”【椰林鄉村生態旅游區】景點包含1、乘竹筏游覽中國的“亞馬遜”河,體驗【生態竹筏漂流】(游覽約50分鐘);2、參觀海南特有的少數民族風情——【黎村苗寨】(游覽約50分鐘),欣賞黎苗歌舞,了解少數民族的人土風情;3、參觀于莽莽熱帶雨林之探訪神秘的【蚩尤部落】(游覽約50分鐘)體會海南原始部落居民的生活,品味海南原滋原味的土著文化;后繼乘車赴海南最大的歸國華僑聚集地-興隆華僑農場,游覽熱帶植物王國、欣賞奇花異草—【熱帶植物園】(游覽約50分鐘);晚飯后可自費欣賞異國風情歌舞【泰國紅藝人表演】(停留約150分鐘)。</p>
				</div>
				<div class="sliderTxtBot">
					<p><em class="c_c1c1">交通:</em> 巴士 、</p>
					<p><em class="c_c1c1">酒店:</em> 當地標準</p>
					<p><em class="c_c1c1">用餐:</em> 午餐 晚餐</p>
					<p><em class="c_c1c1">景點:</em> 博鰲玉帶灘、 海南椰林鄉村生態旅游區、 生態竹筏漂流、 黎村苗寨、 蚩尤部落、 興隆熱帶植物園</p>
				</div>
			</div>
			<div class="sliderTextAll">
				<div class="sliderText">
					<h2 class="sLine"><b>第3天 陵水縣--三亞</b></h2>
					<p>早餐后前往美女島【分界洲島】小島四周海域清澈透明,海水能見度6—27米,是世界上為數不多的唯一沒有礁石或者鵝卵石混雜的海島,是國內最佳潛水基地(游覽約150分鐘,含船票,海上娛樂項目自理);后繼而親臨馮小剛執導,葛尤、舒琪主演的“非誠勿擾2”情美大片拍攝地、海天仙境、熱帶天堂【亞龍灣熱帶天堂森林公園】(游覽約120分鐘)依山傍海,山在海上,人在樹中,海在眼底,是上帝遺落在凡間的天堂,是目前最南最新高優景區;游覽素有“東方夏威夷”美譽的【亞龍灣國家旅游度假區】沙灘區域(游覽約50分鐘)這里沙白如雪,細如面,軟如棉;自費參觀【鳳凰嶺】乘坐奧地利豪華纜車鳥瞰三亞市全景,穿觀景長廊,聆聽清脆悅耳鳴叫,充分感受人與自然的和諧美妙,“欲窮三亞景,醉美鳳凰嶺”(游覽約90分鐘);晚餐自費享用可充分體現海南飲食文化的【海鮮風味大餐】(停留時間約150分鐘)。</p>
				</div>
				<div class="sliderTxtBot">
					<p><em class="c_c1c1">交通:</em> 巴士 、</p>
					<p><em class="c_c1c1">酒店:</em> 當地標準</p>
					<p><em class="c_c1c1">用餐:</em> 午餐 晚餐</p>
					<p><em class="c_c1c1">景點:</em> 分界洲島、 三亞亞龍灣熱帶天堂森林公園、 亞龍灣國家旅游度假區、 鳳凰嶺</p>
				</div>
			</div>
			<div class="sliderTextAll">
				<div class="sliderText">
					<h2 class="sLine"><b>第4天 三亞</b></h2>
					<p>早餐后參觀海南最具特色的水晶基地【水晶展覽館】(游覽約90分),游覽集中外園林、佛教文化于一體的福澤之地、著名的五A級景區【南山佛教文化苑】(含素齋)(游覽約150分鐘)仰瞻雄偉的大雄寶殿、膜拜世紀之作——海上108米的三面觀音圣像;而后游覽著名四A級景區【天涯海角】(游覽約90分鐘)-有情人終成眷屬的浪漫開端,天荒地老不變的愛情圣地;參觀【土特產總匯】(停留時間約50分鐘);晚餐后可自費乘坐游輪【夜游三亞灣】(游覽約80分鐘)欣賞三亞市夜景,更深層次品位美麗三亞、浪漫天涯的豐富內涵。</p>
				</div>
				<div class="sliderTxtBot">
					<p><em class="c_c1c1">交通:</em> 巴士 、</p>
					<p><em class="c_c1c1">酒店:</em> 當地標準</p>
					<p><em class="c_c1c1">用餐:</em> 午餐 晚餐</p>
					<p><em class="c_c1c1">景點:</em> 水晶展覽館、 南山佛教文化苑(南山寺)、 天涯海角、 夜游三亞灣</p>
				</div>
			</div>
			<div class="sliderTextAll">
				<div class="sliderText">
					<h2 class="sLine"><b>第5天 三亞--重慶</b></h2>
					<p>早上睡到自然醒,自由活動,根據航班時間送往三亞鳳凰機場返回重慶,結束愉快旅程。</p>
				</div>
				<div class="sliderTxtBot">
					<p><em class="c_c1c1">交通:</em> 巴士 、</p>
					<p><em class="c_c1c1">酒店:</em> 當地標準</p>
					<p><em class="c_c1c1">用餐:</em> 午餐 晚餐</p>
					<p><em class="c_c1c1">景點:</em> 重慶機場、北京</p>
				</div>
			</div>
		</div>
	</div>
	<div class="SliderSignBox">
		<ul class="sliderSign">
			<li class="current"><a href="javascript:void(0);">1</a></li>
			<li><a href="javascript:void(0)">2</a></li>
			<li><a href="javascript:void(0)">3</a></li>
			<li><a href="javascript:void(0)">4</a></li>
			<li><a href="javascript:void(0)">5</a></li>
		</ul>
	</div>
	<span class="slideNext"><a href="javascript:void(0);" title="下一頁"></a></span>
	<em class="slideTxtMore"><a href="javascript:void(0);"><span class="viewmore">更多</span></a></em>
</div>
<div style="text-align:center;clear:both">
</div>



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


熱門標簽: 圖片疊加 圖片層疊 圖片拖動 圖片拖拽 圖片翻轉 圖片旋轉 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 頭像上傳 圖片上傳 二維碼 圖片放大鏡 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 滾動切換 滾動條切換 滑動選項卡 滑動切換 圖片廣告 純圖片輪播 圖片輪播 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片切換 圖片選項卡 圖標選項卡 圖片收縮展開 圖片收縮 圖片展開 圖標導航 圖標菜單 自動滾動圖片輪播 滑動手風琴 背景切換 大圖切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 收縮展開 展開收縮 收縮 展開 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖表 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片 圖片插件 頭像截圖 文字收縮展開 文字收縮 文字展開 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 文字切換 文字選項卡 圖片切換 切換圖片 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子