【jQuery实例】整屏+单个左右切换

  • 击左右切换按钮,单个内容依次进行切换;
  • 点击圆点,整屏内容切换;
  • 纯手打,难免会有问题,希望多多指导;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一屏左右切换和单个切换</title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<style>
body{background:rgba(115,138,149,.35)}
.title-txt{text-align:center}
.news-area{width:858pt;height:700px}
.news-wrapper{overflow:hidden;margin-left:20px;width:843pt;height:462px}
.news-click{position:relative;z-index:10;width:1170px;height:60px}
.news-click .next,.news-click .prev{position:absolute;top:18%;z-index:10;width:40px;height:40px;border-radius:20px;background-color:#fff;color:#333;text-align:center;line-height:40px;cursor:pointer}
.news-click .prev{left:20px}
.news-click .next{right:28px}
.news-click .index{position:absolute;top:30%;left:50%;margin-left:-10%;width:20%;height:10px;text-align:center}
.news-click .index>.fa{margin-right:10px;color:#fff;font-size:9pt;cursor:pointer}
.news-click .index>.current{width:11px;height:9px;border-radius:6px;background-color:#fff;line-height:10px}
.news-container{position:relative;overflow:hidden;padding-left:0;width:87750pt}
.news-item{float:left;margin-right:20px;box-shadow:23px 68px 115px #333;list-style:none}
.news-item img{display:block;width:361px;height:271px}
.news-event{padding:10px 20px;width:361px;border:1px solid #e5e5e5}
.news-event h5{color:#333;font-size:1pc;line-height:1.4}
.news-event p{margin-top:0}
.news-event a{color:#25a2c3}
</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="area col-md-12 col-sm-12 col-xs-12">
			<h2 class="title-txt">新闻资讯</h2>
			<h3 class="title-txt title-en">News & Event</h2>
		</div>
	</div>
	<div class="row area news-area">
		<div class="news-wrapper" id="slideList">
			<ul class="news-container">
				<li class="news-item">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/23/000015mhccbzfnofxbcncv.jpg">
					<div class="news-event">
						<h5>中国攻克天眼新技术 上千架战机直接升级</h5>
						<p>中国航空工业集团公司雷达研究所(607所)日前发布消息称,该所成功研製国际首款机载风冷二维有源相控阵火控雷达……</p>
						<a href="http://mil.news.sina.com.cn/china/2017-05-22/doc-ifyfkqks4406737.shtml" target="_blank">更多&gt;&gt;</a>
					</div>
				</li>
				<li class="news-item">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/23/000015afs77qgqyyzs997s.jpg">
					<div class="news-event">
						<h5>中国攻克天眼新技术 上千架战机直接升级</h5>
						<p>这款被称为“战影之眼”的新型雷达,成功解决装配PD雷达(即:脉冲多普勒雷达)战机不能原位直接换装有源相控阵雷达的世界性难题……</p>
						<a href="http://mil.news.sina.com.cn/china/2017-05-22/doc-ifyfkqks4406737.shtml" target="_blank">更多&gt;&gt;</a>
					</div>
				</li>
				<li class="news-item">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/23/000015jih01q6pcoh1h4cb.jpg">
					<div class="news-event">
						<h5>80后首富夫妻向母校豪捐1亿 公司业绩连续下滑</h5>
						<p>提起杭州的知名企业家,大家脑海里首先浮现出的就是马云、宗庆后等一批浙商前辈。</p>
						<a href="http://news.sina.com.cn/o/2017-05-22/doc-ifyfkkmc9988905.shtml" target="_blank">更多&gt;&gt;</a>
					</div>
				</li>
				<li class="news-item">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/23/000015mhccbzfnofxbcncv.jpg">
					<div class="news-event">
						<h5>80后首富夫妻向母校豪捐1亿</h5>
						<p>但江山代有才人出,一位名叫王麒诚的80后,就和妻子吴艳一起,在《2016胡润80后白手起家富豪榜》上……</p>
						<a href="http://news.sina.com.cn/o/2017-05-22/doc-ifyfkkmc9988905.shtml" target="_blank">更多&gt;&gt;</a>
					</div>
				</li>
				<li class="news-item">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/23/000015afs77qgqyyzs997s.jpg">
					<div class="news-event">
						<h5>中国攻克天眼新技术 上千架战机直接升级</h5>
						<p>这款被称为“战影之眼”的新型雷达,成功解决装配PD雷达(即:脉冲多普勒雷达)战机不能原位直接换装有源相控阵雷达的世界性难题……</p>
						<a href="http://mil.news.sina.com.cn/china/2017-05-22/doc-ifyfkqks4406737.shtml" target="_blank">更多&gt;&gt;</a>
					</div>
				</li>
				<li class="news-item">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/23/000015jih01q6pcoh1h4cb.jpg">
					<div class="news-event">
						<h5>80后首富夫妻向母校豪捐1亿 公司业绩连续下滑</h5>
						<p>提起杭州的知名企业家,大家脑海里首先浮现出的就是马云、宗庆后等一批浙商前辈。</p>
						<a href="http://news.sina.com.cn/o/2017-05-22/doc-ifyfkkmc9988905.shtml" target="_blank">更多&gt;&gt;</a>
					</div>
				</li>
				<li class="news-item">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/23/000015mhccbzfnofxbcncv.jpg">
					<div class="news-event">
						<h5>80后首富夫妻向母校豪捐1亿</h5>
						<p>但江山代有才人出,一位名叫王麒诚的80后,就和妻子吴艳一起,在《2016胡润80后白手起家富豪榜》上……</p>
						<a href="http://news.sina.com.cn/o/2017-05-22/doc-ifyfkkmc9988905.shtml" target="_blank">更多&gt;&gt;</a>
					</div>
				</li>
				<li class="news-item">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201705/23/000015afs77qgqyyzs997s.jpg">
					<div class="news-event">
						<h5>中国攻克天眼新技术 上千架战机直接升级</h5>
						<p>这款被称为“战影之眼”的新型雷达,成功解决装配PD雷达(即:脉冲多普勒雷达)战机不能原位直接换装有源相控阵雷达的世界性难题……</p>
						<a href="http://mil.news.sina.com.cn/china/2017-05-22/doc-ifyfkqks4406737.shtml" target="_blank">更多&gt;&gt;</a>
					</div>
				</li>

			</ul>
		</div>
		<div class="news-click" id="slideBtns">
			<span class="prev fa fa-chevron-left"></span>
			<span class="next fa fa-chevron-right"></span>
			<div class="index">
				<span class="fa fa-circle-thin current"></span>
				<span class="fa fa-circle-thin"></span>
				<span class="fa fa-circle-thin"></span>
			</div>
		</div>
	</div>

</div>
<script>$(function() {
	//左右切换
	var page = 1;
	var i = 1; //一页上的个数
	var $parent = $("#slideList").children();
	var $slideBtns = $("#slideBtns");
	var len = $parent.children().length;
	var width = $parent.children().eq(0).width() + 20;
	var all_width = width * 3;
	var pageCount = Math.ceil(len / 3); //总数
	//toLeft
	$slideBtns.on("click", ".next", function() {
		if(!$parent.is(":animated")) {
			if(page == pageCount) {
				$parent.animate({
					left: '-' + width * (i - 1)
				}, "slow");
				i = 3 * (page - 1) + 1;
				page = pageCount;
			} else {
				$parent.animate({
					left: '-=' + width
				}, "slow");
				if(i == (page * 3)) {
					$(this).siblings(".index").children().eq(page).addClass("current").siblings().removeClass("current");
					page++;
				}
				i++;
			}
		}
	});
	//toRight
	$slideBtns.on("click", ".prev", function() {
		if(!$parent.is(":animated")) {
			if(i == 1) {
				$parent.animate({
					left: '0px'
				}, "slow");
				i = 1;
				page = 1;
			} else {
				if(page == pageCount) {
					page -= 1;
				}
				$parent.animate({
					left: '+=' + width
				}, "slow");
				if(i == page * 2) {
					$(this).siblings(".index").children().eq(page - 1).addClass("current").siblings().removeClass("current");
					if(page > 1) {
						page--;
					}
				}
				i--;
			}
		}

	});
	$slideBtns.children(".index").on("click", ".fa", function() {
		var $this = $(this);
		var index = $this.index();
		var current_index = $this.siblings(".current").index();
		i = 1;
		if(!$parent.is(":animated")) {
			if(current_index == -1) {
				return;
			} else {
				$parent.animate({
					left: '-' + all_width * index
				}, "slow");
				$(this).addClass("current").siblings().removeClass("current");
				if(index == 0) {
					page = 1;
				} else {
					page = index + 1;
					i = 3 * (page - 1) + 1;
				}
			}

		}
	});
})
</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 【jQuery实例】整屏+单个左右切换

赞 (0)
分享到:更多 ()

发表评论 0