jQuery新聞無縫滾動切換效果



178 708 237



特效描述:jQuery新聞 無縫滾動切換,jQuery新聞無縫滾動切換效果

代碼結構

1. 引入CSS

<link rel='stylesheet prefetch' href='css/bootstrap.min.css'>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/bootstrap.min.js'></script>

3. HTML代碼

<div class="bg-demo">
  <div class="container">
	<div id="carousel-example-vertical" class="carousel vertical slide">
	  <div class="carousel-inner" role="listbox">
		<div class="item active">
		  <p class="ticker-headline">
			<a href="#">
			  <strong>Article Headline 1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
			</a>
		  </p>
		</div>
		<div class="item">
		  <p class="ticker-headline">
			<a href="#">
			  <strong>Article Headline 2</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
			</a>
		  </p>
		</div>
		<div class="item">
		  <p class="ticker-headline">
			<a href="#">
			  <strong>Article Headline 3</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
			</a>
		  </p>
		</div>
		<div class="item">
		  <p class="ticker-headline">
			<a href="#">
			  <strong>Article Headline 4</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
			</a>
		  </p>
		</div>
		<div class="item">
		  <p class="ticker-headline">
			<a href="#">
			  <strong>Article Headline 5</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
			</a>
		  </p>
		</div>
	  </div>
	  <!-- Controls -->
	  <a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	  </a>
	  <a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	  </a>
	</div>
  </div>
</div>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滾動切換 滾動條切換 文字滾動 文字無縫滾動 文字間歇滾動 文字切換 文字選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子