前端ABC- 击左右切换按钮，单个内容依次进行切换；
- 点击圆点，整屏内容切换；
- 纯手打，难免会有问题，希望多多指导；
<!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">更多>></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">更多>></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">更多>></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">更多>></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">更多>></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">更多>></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">更多>></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">更多>></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实例】整屏+单个左右切换