jQuery仿途牛图片轮播样式代码



205 819 274



特效描述:jQuery 图片轮播样式,jQuery途牛多样式轮播图片代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/tuniu.css" />

2. 引入JS

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/index.js"></script>

3. HTML代码

	<style>
	body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
	li, dl, dt, dd, form, a, fieldset, input, th, td
	{margin: 0; padding: 0; border: 0; outline: none;list-style-type: none;overflow-x:none  }
	body{line-height: 1;font-size: 88% ;font-family: "微软雅黑"}
	h1, h2, h3, h4, h5, h6{font-size: 100%; margin: 0 ;font-weight: 400;padding:0;}
	ul, ol{list-style: none;}
	a{color:#404040;text-decoration: none;}  
	body{
		height:2000px;
	}   
	</style>
	 	   <div class="center">
	 	   	     <div class="center_top">
                  <!-- <==========================================================> -->
                                  <!-- 轮播图开始区域 -->
                 <!-- <div id="bannar"> -->
                       <div class="content_middle">
	                      <div class="common_da">
	                      		<a class="common btnLeft"href="javascript:;"></a>
	                            <a class="common btnRight"href="javascript:;"></a>
	                      </div>
                           <ul>
                              <li style="background:url(images/bg1.jpeg) no-repeat center center;opacity: 100;filter: alpha(opacity=1);"></li>
                              <li style="background:url(images/bg2.jpeg) no-repeat center center;"></li>
                              <li style="background:url(images/bg3.jpeg) no-repeat center center;"></li>
                              <li style="background:url(images/bg4.jpeg) no-repeat center center;"></li>
                              <li style="background:url(images/bg5.jpeg) no-repeat center center;"></li>
                              <li style="background:url(images/bg6.jpeg) no-repeat center center;"></li>
                           </ul>
                            <div class="table">
                                <a class="small_active"href="javascript:;">跨年购心动价</a>
                                <a href="javascript:;">五折秒杀周边游</a>
                                <a href="javascript:;"> 跟台湾宝贝趴趴走</a>
                                <a href="javascript:;">国内最高减1000</a>
                                <a href="javascript:;">迪拜新年特惠</a>
                                <a href="javascript:;">日韩东南亚专场</a>
                            </div>
                       </div>    	  
	 	   	     </div>    
	 	   </div>



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


热门标签: 导航切换 图片淡出淡进 带标题的焦点图 文字淡出淡进 带缩略图的幻灯片 带简介的焦点图 图片切换 图片轮播 文字切换 自动滚动图片轮播 背景切换 马赛克幻灯片 手风琴 全屏焦点图 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 渐隐切换 淡出淡入淡进 焦点图幻灯片

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

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

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