WEB开发者-分享WEB开发知识,让开发变得更简单!

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

  • 点击左右切换按钮,单个内容依次进行切换;

  • 点击圆点,整屏内容切换;

  • 纯手打,难免会有问题,希望多多指导;

blob.png

<!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>

<!--www.webkfz.com  web开发者 --!>

</body>

</html>


本文链接:https://www.webkfz.com/WEBkF/jQuery/11433.html

版权声明:站内所有文章皆来自网络转载,只供分享作用,不代表本站的观点!

发表评论 共有 0 条评论)

联系客服
网站客服 业务合作 QQ
1244305267
公众号
公众号
公众号
返回顶部