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



66 260 87



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



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 导航切换 收缩导航菜单 图片头像上传 带标题的焦点图 文字收缩展开 文件上传 带缩略图的幻灯片 带简介的焦点图 图片切换 图片收缩展开 文本框 图片轮播 文字切换 下拉框 自动滚动图片轮播 背景切换 复选 马赛克幻灯片 手风琴 单选 全屏焦点图 选项卡自动切换 登录框 视频切换 注册框 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 收缩收起展开 切换按钮 form表单 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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