jquery手指滑动制作手机焦点图代码



59 235 79



特效描述: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

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