jQuery banner宽屏的网站首页图片轮播切换代码



149 592 198



特效描述:jQuery banner宽屏的网站首页图片轮播切换代码,jQuery banner大气的图片切换,带分类菜单滑动显示组合,适用于各大网站的首页图片轮播代码。

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/banner.js"></script>

3. HTML代码

<style type="text/css">
.bannerbox{width:100%;position:relative;overflow:hidden;}
.Homebanner{width:100%;position:relative;height:600px;overflow:hidden;}
.Homebanner ul{width:100%;position:absolute;height:600px;}
.Homebanner ul li{width:100%;height:600px;position:absolute;overflow:hidden;}
.Homebanner ul li img{width:1900px;position:absolute;left:50%;top:0px;display:block;margin-left:-950px;}
.Homeleft,.Homeright{background:#000;font-family:"宋体";width:50px;height:50px;line-height:50px;text-align:center;font-size:40px;color:#fff;position:absolute;top:45%;cursor:pointer;transition:all .2s ease;opacity:0;z-index:899999}
.Homeleft{left:-60px;}
.Homeright{right:-60px;}
.bannerbox:hover .Homeleft{left:0px;opacity:1}
.bannerbox:hover .Homeright{right:0px;opacity:1}
.Homedot{position:absolute;width:100%;text-align:center;z-index:999;bottom:60px;}
.Homedot a{display:inline-block;margin:0px 5px;height:12px;width:12px;line-height:1000px;overflow:hidden;background:url(img/index_229.png) no-repeat;}
.Homedot a.cur{background:url(img/index_228.png) no-repeat}
.Homebannertext{position:absolute;left:0px;top:0px;width:100%;height:100%;}
.Homebannertext img.bigimg{transform:translateY(100px);-moz-transform:translateY(100px);-ms-transform:translateY(100px);-o-transform:translateY(100px);-webkit-transform:translateY(100px);}
.Homebannertext dl.bannerone{position:absolute;width:1180px;left:50%;margin-left:-590px;top:251px;text-align:center;z-index:9999;}
.Homebannertext dl.bannerone dt{float:right;font-size:45px;width:750px;height:80px;margin-left:100px;line-height:75px;color:#fff;background:#eb3900;transform:translateY(100px);-moz-transform:translateY(100px);-ms-transform:translateY(100px);-o-transform:translateY(100px);-webkit-transform:translateY(100px);}
.Homebannertext dl.bannerone dd{float:right;font-size:29px;color:#fff;background:#000;width:360px;height:60px;line-height:60px;margin-right:45px;transform:translateY(100px);-moz-transform:translateY(100px);-ms-transform:translateY(100px);-o-transform:translateY(100px);-webkit-transform:translateY(100px);}
.Homebannertext dl.bannertwo{position:absolute;width:1180px;left:50%;top:0px;color:#fff;margin-left:-590px;z-index:9999;}
.Homebannertext dl.bannertwo dt{padding-top:110px;position:relative;transform:translateY(100px);-moz-transform:translateY(100px);-ms-transform:translateY(100px);-o-transform:translateY(100px);-webkit-transform:translateY(100px);}
.Homebannertext dl.bannertwo dt h3{font-size:50px;line-height:60px;font-weight:700;position:relative;}
.Homebannertext dl.bannertwo dt p{font-size:20px;position:relative;padding-top:20px;}
.Homebannertext dl.bannerthree{position:absolute;width:1220px;left:50%;margin-left:-610px;top:0px;}
.Homebannertext dl.bannerthree dt{float:left;position:relative;transform:translateX(100px);-moz-transform:translateX(100px);-ms-transform:translateX(100px);-o-transform:translateX(100px);-webkit-transform:translateX(100px);}
.Homebannertext dl.bannerthree img{display:block;position:relative;width:auto;height:auto;left:0px;margin:0px;top:0px;}
.Homebannertext dl.bannerthree dd{width:500px;float:left;color:#fff;padding-top:170px;position:relative;padding-left:25px;transform:translateX(100px);-moz-transform:translateX(100px);-ms-transform:translateX(100px);-o-transform:translateX(100px);-webkit-transform:translateX(100px);}
.Homebannertext dl.bannerthree dd h3{font-size:55px;font-weight:700;line-height:70px;}
.Homebannertext dl.bannerthree dd p{font-size:20px;line-height:30px;}
.bannereffect{opacity:0;filter:alpha(opacity=0);}
.bannertime{transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;}
.bannertime1{transition:all .8s ease-in-out .2s;-moz-transition:all .8s ease-in-out .2s;-ms-transition:all .8s ease-in-out .2s;-o-transition:all .8s ease-in-out .2s;-webkit-transition:all .8s ease-in-out .2s;}
.bannertime2{transition:all 1s ease-in-out .2s;-moz-transition:all 1s ease-in-out .2s;-ms-transition:all 1s ease-in-out .2s;-o-transition:all 1s ease-in-out 2s;-webkit-transition:all 1s ease-in-out .2s;}
.Homebanner li.cur .Homebannertext img.bigimg{transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);-webkit-transform:translateY(0px);}
.Homebanner li.cur .Homebannertext dl.bannerone dt{transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);-webkit-transform:translateY(0px);}
.Homebanner li.cur .Homebannertext dl.bannerone dd{transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);-webkit-transform:translateY(0px);}
.Homebanner li.cur .Homebannertext dl.bannertwo dt{transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);-webkit-transform:translateY(0px);}
.Homebanner li.cur .Homebannertext dl.bannerthree dt{transform:translateX(0px);-moz-transform:translateX(0px);-ms-transform:translateX(0px);-o-transform:translateX(0px);-webkit-transform:translateX(0px);}
.Homebanner li.cur .Homebannertext dl.bannerthree dd{transform:translateX(0px);-moz-transform:translateX(0px);-ms-transform:translateX(0px);-o-transform:translateX(0px);-webkit-transform:translateX(0px);}
.Homebanner li.cur .bannereffect{opacity:1;filter:alpha(opacity=100);}
.Homebanner li.cur1 .bannertime{transition:all .4s linear .2s;-moz-transition:all .4s linear .2s;-ms-transition:all .4s linear .2s;-o-transition:all .4s linear .2s;-webkit-transition:all .4s linear .2s;}
.Homebanner li.cur1 .bannertime1{transition:all .4s linear .1s;-moz-transition:all .4s linear .1s;-ms-transition:all .4s linear .1s;-o-transition:all .4s linear .1s;-webkit-transition:all .4s linear .1s;}
.Homebanner li.cur1 .bannertime2{transition:all .4s linear;-moz-transition:all .4s linear;-ms-transition:all .4s linear;-o-transition:all .4s linear;-webkit-transition:all .4s linear;}
.Homebanner li.cur1 .Homebannertext img.bigimg{transform:translateY(100px);-moz-transform:translateY(100px);-ms-transform:translateY(100px);-o-transform:translateY(100px);-webkit-transform:translateY(100px);}
.Homebanner li.cur1 .Homebannertext dl.bannerone dt{transform:translateY(100px);-moz-transform:translateY(100px);-ms-transform:translateY(100px);-o-transform:translateY(100px);-webkit-transform:translateY(100px);}
.Homebanner li.cur1 .Homebannertext dl.bannerone dd{transform:translateY(100px);-moz-transform:translateY(100px);-ms-transform:translateY(100px);-o-transform:translateY(100px);-webkit-transform:translateY(100px);}
.Homebanner li.cur1 .Homebannertext dl.bannertwo dt{transform:translateY(100px);-moz-transform:translateY(100px);-ms-transform:translateY(100px);-o-transform:translateY(100px);-webkit-transform:translateY(100px);}
.Homebanner li.cur1 .Homebannertext dl.bannerthree dt{transform:translateX(100px);-moz-transform:translateX(100px);-ms-transform:translateX(100px);-o-transform:translateX(100px);-webkit-transform:translateX(100px);}
.Homebanner li.cur1 .Homebannertext dl.bannerthree dd{transform:translateX(100px);-moz-transform:translateX(100px);-ms-transform:translateX(100px);-o-transform:translateX(100px);-webkit-transform:translateX(100px);}
.Homebanner li.cur1 .bannereffect{opacity:0;filter:alpha(opacity=0);}
.index_btn{width:100%;position:absolute;height:40px;top:560px;z-index:9999;background:#191919;}
.index_btn ul{margin:0px auto;padding:0px;width:1180px;}
.index_btn ul li{float:left;width:295px;height:40px;position:relative;}
.index_btn ul li span{position:relative;z-index:999;width:294px;display:block;height:40px;}
.index_btn ul li span a{display:block;width:294px;color:#FFF;background:#191919;cursor:pointer;font-size:14px;text-align:center;line-height:40px;border-right:1px solid #a7a7a7;float:left;height:40px;}
.index_btn ul li span a:hover{color:#FFF;background:#e60012;}
.index_btn ul li span a.cur{border:none;width:295px;}
.index_btn ul li em{display:inline-block;height:40px;padding-left:30px;}
.index_btn ul li em.btn{background:url(img/btn1.png) no-repeat left center;}
.index_btn ul li em.btn1{background:url(img/btn3.png) no-repeat left center;}
.index_btn ul li em.btn2{background:url(img/btn4.png) no-repeat left center;}
.index_btn ul li em.btn3{background:url(img/btn2.png) no-repeat left center;}
.index_btnbox{width:295px;height:260px;background:#FFF;position:absolute;top:0px;left:0px;padding:20px 0px 0px 0px;}
.index_btnbox img{display:block;margin:auto;}
.index_btnbox p{margin:0px;padding:20px 0px 0px 19px;}
.index_btnbox p a{display:block;float:left;width:130px;padding-bottom:5px;line-height:24px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$(".index_btn li").hover(function(){
		$(this).find("div").stop(true).animate({top:-280},300);	 
	},function(){
		$(this).find("div").stop(true).animate({top:-0},300);
	});
});
</script>
<div class="bannerbox">
	<div class="Homebanner">
		<ul>
			<li class="Load cur" style="z-index:99">
				<img src="img/banner2016.jpg" alt="">
				<div class="Homebannertext">
					<img src="img/banner2016.png" class="bannereffect bannertime bigimg">
					<dl class="bannerone clearfix">
						<dt class="bannereffect bannertime1">
							 网站建设<b>第一品牌</b>·互联网整合专家
						</dt>
						<dd class="bannereffect bannertime2">
							 为梦想者创造梦想品牌
						</dd>
					</dl>
				</div>
			</li>
			<li class="Load">
				<img src="img/banner02.jpg" alt="">
				<div class="Homebannertext">
					<img src="img/02.png" class="bannereffect bannertime bigimg">
					<dl class="bannertwo clearfix">
						<dt class="bannereffect bannertime1">
							 <h3>专业的O2O商城系统</h3>
							 <p>微信商城、手机商城、网上商城一体化的商城系统!</p>
						</dt>
					</dl>
				</div>
			</li>
			<li class="Load"><img src="img/03.jpg" alt="">
				<div class="Homebannertext">
					<dl class="bannerthree clearfix">
						<dt class="bannereffect bannertime"><img src="img/03-1.png" alt=""></dt>
						<dd class="bannereffect bannertime1">
							 <img src="img/03-2.png" alt="">
							 <h3>持续追求更高品质</h3>
							 <p>我们服务了超过1500家企业,其中300家为上市公司,集团企业及政府机构,让我们的专业帮助您的品牌更有效率的传播!</p>
						</dd>
					</dl>
				</div>
			</li>
		</ul>
		<div class="Homeleft"><</div>
		<div class="Homeright">></div>
		<div class="Homedot"><a href="javascript:;" class="cur">1</a><a href="javascript:;">2</a><a href="javascript:;">3</a></div>
	</div>
	<div class="index_btn">
		<ul>
			 <li><span><a href="#"><em class="btn">成功案例</em></a></span>
			 <div class="index_btnbox index_btnanli" style="top: 0px;">
				<img src="img/menu_pic1.jpg" alt="成功案例" width="258" height="112">
				<p class="clearfix">
					<a href="#">知名客户</a>
					<a href="#">网站案例</a>
					<a href="#">客户评价</a>
					<a href="#">客户列表</a>
				</p>
			 </div>
			 </li>
			 <li><span><a href="#"><em class="btn1">微信营销</em></a></span>
			 <div class="index_btnbox">
				<img src="img/menu_pic2.jpg" alt="微信营销" width="258" height="112">
				<p class="clearfix">
					<a href="#">微信商城O2O整合</a>
					<a href="#">手机网站案例</a>
					<a href="#">微信活动微场景</a>
					<a href="#">手机网站建设</a>
					<a href="#">微官网</a>
					<a href="#">手机解决方案</a>
					<a href="#">苹果手机应用</a>
					<a href="#">安卓手机应用</a>
				</p>
			 </div>
			 </li>
			 <li><span><a href="#"><em class="btn2">网站建设</em></a></span>
			 <div class="index_btnbox">
				<img src="img/menu_pic3.jpg" alt="网站建设" width="258" height="112">
				<p class="clearfix">
					<a href="#" title="品牌创意网站建设">品牌创意网站建设</a>
					<a href="#" title="企业官方网站建设">企业官方网站建设</a>
					<a href="#" title="上市公司网站建设">上市公司网站建设</a>
					<a href="#" title="B2C电子商务网站建设">B2C电子商务网站建设</a>
					<a href="#" title="大型门户类网站建设">大型门户类网站建设</a>
					<a href="#" title="专题活动网站(MINISITE)">专题活动网站</a>
					<a href="#" title="全方位网站运营代理">全方位网站运营代理</a>
				</p>
			 </div>
			 </li>
			 <li><span><a href="#" class="cur"><em class="btn3">我们的实力</em></a></span>
			 <div class="index_btnbox">
				<img src="img/menu_pic4.jpg" alt="我们的实力" width="258" height="112">
				<p class="clearfix">
				   <a href="#" title="关于沙漠风">关于沙漠风</a>
				   <a href="#" title="实力认可">实力认可</a>
				   <a href="#" title="沙漠风与众不同">沙漠风与众不同</a>
				   <a href="#" title="理念与信仰">理念与信仰</a>
				</p>
			 </div>
			 </li>
		</ul>
	</div>
</div>



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


热门标签: 浮动菜单 浮动导航 flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 滚动导航菜单 滚动菜单 滚动导航 导航切换 菜单切换 滑动导航菜单 滑动导航 滑动菜单 flash焦点图 flash幻灯片 flashbanner flash图片轮播 滑动选项卡 滑动切换 滚动切换 滚动条切换 滑动手风琴 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 全屏焦点图 渐隐切换 全屏切换 淡出淡进 淡出 淡进 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 焦点图 幻灯片 轮播图 bar焦点图 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 图片淡出淡进 图片淡出 图片淡进 图片全屏 二级菜单 二级导航菜单 二级导航 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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