jquery手指滑動制作手機焦點圖代碼



62 246 83



特效描述:jquery手指滑動 手機焦點圖代碼,手機焦點圖代碼

代碼結構

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/idangerous.swiper.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper-2.0.min.js"></script>

3. HTML代碼

<div class="swiper-container swiper-content">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 1</h1>
				<img class="movie-pic" src="img/1.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 2</h1>
				<img class="movie-pic" src="img/2.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 3</h1>
				<img class="movie-pic" src="img/3.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 4</h1>
				<img class="movie-pic" src="img/4.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 5</h1>
				<img class="movie-pic" src="img/5.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 6</h1>
				<img class="movie-pic" src="img/6.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 7</h1>
				<img class="movie-pic" src="img/7.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 8</h1>
				<img class="movie-pic" src="img/8.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 9</h1>
				<img class="movie-pic" src="img/1.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="inner">
				<h1>2 - 1 10</h1>
				<img class="movie-pic" src="img/2.jpg" height="150" width="150" alt="">
				<div class="movie-text">百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立于北京中關村,致力于向人們提供“簡單,可依賴”的信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</div>
			</div>
		</div>  
	</div>
</div>
<div class="swiper-container swiper-nav">
	<div class="swiper-wrapper">
		<div class="swiper-slide active-nav">
			<span class="angle"></span>
			<img src="img/1.jpg" alt="">
			<div class="title">Movie 1</div>
		</div>
		<div class="swiper-slide">
			<span class="angle"></span>
			<img src="img/2.jpg" alt="">
			<div class="title">Movie 2</div>
		</div>
		<div class="swiper-slide">
			<span class="angle"></span>
			<img src="img/3.jpg" alt="">
			<div class="title">Movie 3</div>
		</div>
		<div class="swiper-slide">
			<span class="angle"></span>
			<img src="img/4.jpg" alt="">
			<div class="title">Movie 4</div>
		</div>
		<div class="swiper-slide">
			<span class="angle"></span>
			<img src="img/5.jpg" alt="">
			<div class="title">Movie 5 Long Title</div>
		</div>
		<div class="swiper-slide">
			<span class="angle"></span>
			<img src="img/6.jpg" alt="">
			<div class="title">Movie 6</div>
		</div>
		<div class="swiper-slide">
			<span class="angle"></span>
			<img src="img/7.jpg" alt="">
			<div class="title">Movie 7</div>
		</div>
		<div class="swiper-slide">
			<span class="angle"></span>
			<img src="img/8.jpg" alt="">
			<div class="title">Movie 8</div>
		</div>
		<div class="swiper-slide">
			<span class="angle"></span>
			<img src="img/1.jpg" alt="">
			<div class="title">Movie 9</div>
		</div>
		<div class="swiper-slide">
			<span class="angle"></span>
			<img src="img/2.jpg" alt="">
			<div class="title">Movie 10</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/idangerous.swiper-2.0.min.js"></script> 
<script type="text/javascript">
$(function(){
	function setContentSize() {
		$('.swiper-content').css({
			height: $(window).height()-$('.swiper-nav').height()
		})
	}
	setContentSize()
	$(window).resize(function(){
		setContentSize()
	})
	//Swiper Content
	var contentSwiper = $('.swiper-content').swiper({
		onSlideChangeStart: function(){
			updateNavPosition()
		}
	})
	//Nav
	var navSwiper = $('.swiper-nav').swiper({
		visibilityFullFit: true,
		slidesPerView:'auto',
		//Thumbnails Clicks
		onSlideClick: function(){
			contentSwiper.swipeTo( navSwiper.clickedSlideIndex )
		}
	})
	console.log("\u767e\u5ea6\u641c\u7d22\u3010\u7d20\u6750\u5bb6\u56ed\u3011\u4e0b\u8f7d\u66f4\u591aJS\u7279\u6548\u4ee3\u7801");
	//Update Nav Position
	function updateNavPosition(){
		$('.swiper-nav .active-nav').removeClass('active-nav')
		var activeNav = $('.swiper-nav .swiper-slide').eq(contentSwiper.activeIndex).addClass('active-nav')
		if (!activeNav.hasClass('swiper-slide-visible')) {
			if (activeNav.index()>navSwiper.activeIndex) {
				var thumbsPerNav = Math.floor(navSwiper.width/activeNav.width())-1
				navSwiper.swipeTo(activeNav.index()-thumbsPerNav)
			}
			else {
				navSwiper.swipeTo(activeNav.index())
			}	
		}
	}
})
</script>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子