利用jquery实现scrollpic旅游网站幻灯片切换



24 93 32



特效描述:利用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

加群请备注:从官网了解到