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