jquery.bxslider.js百度预测频道带按钮宽屏焦点图滑动切换代码



148 588 197



特效描述:jquery.bxslider.js 带按钮宽屏焦点图 宽屏焦点图 滑动切换,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.bxslider.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.1.min_044d0927.js"></script>
<script type="text/javascript" src="js/jquery.bxslider_e88acd1b.js"></script>

3. HTML代码

<div class="top_slide_wrap">
	<ul class="slide_box bxslider">
		<li>
			<a href="#"><img src="images/01_d56c756b.jpg" alt=""></a>
			<div class="slide_info">
				<div class="slide_info_card">
					<a href="#">
						<div class="slide_info_card_text">
							<h2>世界杯预测</h2>
							<p>巴西世界杯疯狂来袭,谁会成为最终的王者?谁会扮演神秘的黑马?百度预测再现章鱼保罗的神话</p>
							<p><strong>点击进入&gt;</strong></p>
						</div>
					</a>
					<div class="slide_info_card_bg"></div>
				</div>
			</div>
		</li>
		<li>
			<a href="#"><img src="images/02_fea8ef37.jpg" alt="" title="城市预测"></a>
			<div class="slide_info">
				<div class="slide_info_card">
					<a href="#">
						<div class="slide_info_card_text">
							<h2>城市预测</h2>
							<p>哪些城市将被挤爆,哪里的人最爱旅游,城市旅游预测尽在掌握</p>
							<p><strong>点击进入&gt;</strong></p>
						</div>
					</a>
					<div class="slide_info_card_bg"></div>
				</div>
			</div>
		</li>
		<li>
			<a href="#"><img src="images/03_475be110.jpg" alt=""></a>
			<div class="slide_info">
				<div class="slide_info_card">
					<a href="#">
						<div class="slide_info_card_text">
							<h2>景点预测</h2>
							<p>提供全国5A景区未来2日人流及舒适度的预测,为您短期旅游出行参考</p>
							<p><strong>点击进入&gt;</strong></p>
						</div>
					</a>
					<div class="slide_info_card_bg"></div>
				</div>
			</div>
		</li>
		<li>
			<a href="#"><img src="images/04_4ce683b9.jpg" alt=""></a>
			<div class="slide_info">
				<div class="slide_info_card">
					<a href="#">
						<div class="slide_info_card_text">
							<h2>高考预测</h2>
							<p>全国大学和专业哪些热门?哪些好考?高考预测,您的报考决策指南</p>
							<p><strong>点击进入&gt;</strong></p>
						</div>
					</a>
					<div class="slide_info_card_bg"></div>
				</div>
			</div>
		</li>
		<li>
			<a href="#"><img src="images/05_340d9fb4.jpg" alt=""></a>
			<div class="slide_info">
				<div class="slide_info_card">
					<a href="#">
						<div class="slide_info_card_text">
							<h2>疾病预测</h2>
							<p>流感来袭,哪个城市比较安全?治疗肝炎,哪个医院最受关注?疾病预测,您的流行病防治小帮手。</p>
							<p><strong>点击进入&gt;</strong></p>
						</div>
					</a>
					<div class="slide_info_card_bg"></div>
				</div>
			</div>
		</li>
	</ul>
	<div class="op_btns clearfix">
		<a href="#" class="op_btn op_prev"><span></span></a>
		<a href="#" class="op_btn op_next"><span></span></a>
	</div>
</div>
<script type="text/javascript">
(function(){
	$(".bxslider").bxSlider({
		auto:true,
		prevSelector:$(".top_slide_wrap .op_prev")[0],nextSelector:$(".top_slide_wrap .op_next")[0]
	});
})();
</script>



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


热门标签: 滑动 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 全屏焦点图 全屏切换 切换按钮 宽屏全屏 表单 焦点图 幻灯片 图片轮播 图片全屏 带简介的焦点图 图片滑动 图片切换 选项卡自动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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