jQuery仿百度經驗的圖文幻燈片預覽效果



138 548 183



特效描述:圖文幻燈片 幻燈片預覽效果,jQuery圖文幻燈片(不兼容IE6,7,8)

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代碼

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>仿百度經驗的圖文幫助中心輪播</title>
	</head>
	<body style="overflow: hidden;">
		<!--幫助中心內容區-->
		<div class="helpcenterWild">
			<div class="new100content">
				<div class="helpcenter clearfloat">
					<div class="helpcenter_Cleft">
						<img src="images/help_left.png">
						<span></span>
					</div>
					<div class="helpcenter_Cright">
						<img src="images/help_right.png">
						<span></span>
					</div>
					<div class="helpcenter_left">
						<h2>幫助中心:仿百度經驗</h2>
						<div id="content_1" class="helpcenter_leftIn mCustomScrollbar _mCS_1">
							<!-- 左側列表 -->
							<ul>
								<li><a class="helpcenter_leftInOn">幫助中心1</a></li>
								<li><a>幫助中心2</a></li>
							</ul>
							<!-- 左側列表end -->
						</div>
					</div>
					<div class="helpcenter_right">
					<!-- 幫助中心右側 -->
						<div class="helpcenter_rightIn">
                      		<!--幫助中心1號信息-->
							<div class="helpcenter_rightInIn displayblock">
								<!-- 圖文1 -->
								<div class="helpcenter_rightIns helpcenter_rightInsOn">
									<div class="helpcenter_rightInL">
										<h2><span>幫助中心1</span><span class="helpcenter_span1">1</span><span>/</span><span>3</span></h2>
										<p>幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心</p>
									</div>
									<div class="helpcenter_rightInR">
										<img src="images/help.jpg">
									</div>
								</div>
								<!-- 圖文2 -->
								<div class="helpcenter_rightIns">
									<div class="helpcenter_rightInL">
										<h2><span>幫助中心1</span><span class="helpcenter_span1">2</span><span>/</span><span>3</span></h2>
										<p>幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心</p>
									</div>
									<div class="helpcenter_rightInR">
										<img src="images/help.jpg">
									</div>
								</div>
								<!-- 圖文3 -->
								<div class="helpcenter_rightIns">
									<div class="helpcenter_rightInL">
										<h2><span>幫助中心1</span><span class="helpcenter_span1">3</span><span>/</span><span>3</span></h2>
										<p>幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心</p>
									</div>
									<div class="helpcenter_rightInR">
										<img src="images/help.jpg">
									</div>
								 </div>
							</div>
                            <!--幫助中心2-->
							<div class="helpcenter_rightInIn">
								<div class="helpcenter_rightIns helpcenter_rightInsOn">
									<div class="helpcenter_rightInL">
										<h2><span>幫助中心2</span><span class="helpcenter_span1">1</span><span>/</span><span>4</span></h2>
										<p>幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心</p>
									</div>
									<div class="helpcenter_rightInR">
										<img src="images/help.jpg">
									</div>
								</div>
								<div class="helpcenter_rightIns">
									<div class="helpcenter_rightInL">
										<h2><span>幫助中心2</span><span class="helpcenter_span1">2</span><span>/</span><span>4</span></h2>
										<p>幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心</p>
									</div>
									<div class="helpcenter_rightInR">
										<img src="images/help.jpg">
									</div>
								</div>
								<div class="helpcenter_rightIns">
									<div class="helpcenter_rightInL">
										<h2><span>幫助中心2</span><span class="helpcenter_span1">3</span><span>/</span><span>4</span></h2>
										<p>幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心</p>
									</div>
									<div class="helpcenter_rightInR">
										<img src="images/help.jpg">
									</div>
								 </div>
                                 <div class="helpcenter_rightIns">
                                    <div class="helpcenter_rightInL">
                                        <h2><span>幫助中心2</span><span class="helpcenter_span1">4</span><span>/</span><span>4</span></h2>
                                        <p>幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心幫助中心</p>
                                    </div>
                                    <div class="helpcenter_rightInR">
                                        <img src="images/help.jpg">
                                    </div>
                                 </div>
							</div>
                            <!--over-->
						</div>
					</div>
				</div>
			</div>
			<div class="helpcenter_bottom">
                <a class="helpcenter_bBL"><img src="images/help_bottomleft.png" alt="" /></a>
                <a class="helpcenter_bB helpcenter_bBon">1</a><a class="helpcenter_bB">2</a><a class="helpcenter_bB">3</a>
                <a class="helpcenter_bBR"><img src="images/help_bottomright.png" alt="" /></a>
            </div>
		</div>
		<!--幫助中心結束-->
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 圖片滾動 圖片滾動條 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子