用原生js实现百度新闻首页轮播图，动画部分参考原版 ，代码如下；
<!--模仿百度新闻首页轮播图制作，完成于2019-03-28--> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *, :after, :before { /*box-sizing: border-box;*/ /*color: #333;*/ padding: 0px; margin: 0px; font-size: 100%; } .imgDiv, img { width: 560px; height: 305px; } li { list-style: none; float: left; color: darkgray; /*position: relative; top: -75px; left: 400px;*/ padding: 0px; margin-right: 3px; } .rotation { position: relative; width: 560px; height: 305px; } .turn { display: none; text-decoration: none; opacity: 0.6; background-color: #F0F0F0; width: 60px; height: 60px; position: absolute; border-radius: 50%; transition: background-color .3s, opacity .3s; } .turn:after { content: " "; position: absolute; left: 75%; width: 3px; height: 50%; background: #f00; } .turn:hover { color: #c00; } .turn .left.up:hover { transform: rotate(20deg); } .turn .left.down:hover { transform: rotate(-20deg); } .turn .right.up:hover { transform: rotate(20deg); } .turn .right.down:hover { transform: rotate(-20deg); } .up { display: inline-block; position: absolute; top: 6px; font-size: 22px; /*transform: translateY(-50%) rotate(30deg);*/ transition: transform .3s, color .3s } .down { display: inline-block; position: absolute; bottom: 6px; font-size: 22px; /*left:10px;*/ transition: transform .3s, color .3s } .left { left: 20px; } .right { right: 20px; } .leftuporigin { transform-origin: left bottom; } .leftdownorigin { transform-origin: left top; } .rightuporigin { transform-origin: right bottom; } .rightdownorigin { transform-origin: right top; } .imgView { display: none; } .imgView.current-img{ display: block; } .imgTitle { color: white; position: absolute; left: 0; bottom: 13px; padding-left: 10px; } .imgNav { position: absolute; right: 18px; bottom: 13px; } .imgNav a { text-decoration: none; color: darkgray; } .imgNav .current-imgNav{ color: #369; } .backward { } .forward { left: 500px; } .pageTurning { position: relative; } .pageTurning a:hover::before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .pageTurning a::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; border-radius: 50%; background: #fff; -webkit-transition: -webkit-transform .3s, opacity .3s; transition: transform .3s, opacity .3s; -webkit-transform: scale(0.9); transform: scale(0.9); } .pageTurning a:hover .icon-wrap::before, .pageTurning a:hover .icon-wrap::after { background: #c00; } .pageTurning a:hover .icon-wrap::before { -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } .pageTurning a:hover .icon-wrap::after { -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); } .carousel-btn-prev, .carousel-btn-next { position: absolute; z-index: 89; top: 130px; width: 50px; height: 50px; /*border: ;*/ } .carousel-btn-next { -webkit-transform: rotate(180deg); transform: rotate(180deg); } a:visited { color: #222; } .carousel-btn-prev { left: 15px; } .carousel-btn-next { right: 15px; } .icon-wrap { position: relative; display: block; width: 80%; height: 80%; margin: 10% 0 0 10%; } .icon-wrap:before { -webkit-transform: translateX(-50%) rotate(30deg); transform: translateX(-50%) rotate(30deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .icon-wrap::after { top: 50%; -webkit-transform: translateX(-50%) rotate(-30deg); transform: translateX(-50%) rotate(-30deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .icon-wrap::before, .icon-wrap::after { content: " "; position: absolute; left: 25%; width: 3px; height: 50%; background: #fff; -webkit-transition: -webkit-transform .3s, background-color .3s; transition: transform .3s, background-color .3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } </style> </head> <body> <div id="rotation" class="rotation"> <div id="pageTurning" class="pageTurning"> <a id="backward" class="carousel-btn-prev" href="javascript:void(0);"> <span class="icon-wrap"></span> </a> <a id="forward" class="carousel-btn-next" href="javascript:void(0);"> <span class="icon-wrap"></span> </a> </div> <div id="imgDiv" class="imgDiv"> <img class="imgView" src="img/1.jpg"> <img class="imgView" src="img/2.jpg"> <img class="imgView" src="img/3.jpg"> <img class="imgView" src="img/4.jpg"> <img class="imgView" src="img/5.jpg"> <img class="imgView" src="img/6.jpg"> <img class="imgView" src="img/7.jpg"> <img class="imgView" src="img/8.jpg"> </div> <div id="imgTitle" class="imgTitle"><strong></strong></div> <ul id="imgNav" class="imgNav"> <li><a href="javascript:void(0);">●</a></li> <li><a href="javascript:void(0);">●</a></li> <li><a href="javascript:void(0);">●</a></li> <li><a href="javascript:void(0);">●</a></li> <li><a href="javascript:void(0);">●</a></li> <li><a href="javascript:void(0);">●</a></li> <li><a href="javascript:void(0);">●</a></li> <li><a href="javascript:void(0);">●</a></li> </ul> </div> </body> <script type="text/javascript"> //图片标题数组 var str = [ ‘候鸟迁徙 成壮观过境潮‘, ‘美国得州一石油化工厂着火 黑烟滚滚遮天蔽日‘, ‘香格里拉 美景如画‘, ‘气旋炸弹”袭击美国中西部 建筑遭洪水“没顶”‘, ‘埃及阿斯旺的旅游市场‘, ‘纽约哈得孙河畔新景观‘, ‘吉尔吉斯斯坦举办“马背叼羊”赛 骑手飞身夺羊‘, ‘都柏林庆祝圣帕特里克节‘ ]; //窗口加载完成执行 window.onload = function() { var imgTitle = document.getElementById(‘imgTitle‘); //var imgView=document.getElementById(‘imgView‘); var imgNav = document.getElementById(‘imgNav‘); var imgDiv = document.getElementsByClassName(‘imgDiv‘)[0]; var imgViewClass = document.getElementsByClassName(‘imgView‘); var backward = document.getElementById(‘backward‘); var forward = document.getElementById(‘forward‘); //默认显示第一张图片 imgViewClass[0].classList.add(‘current-img‘); //默认显示第一个标题文字 imgTitle.children[0].innerHTML = str[0]; //默认第一个圆点变色 imgNav.children[0].children[0].classList.add(‘current-imgNav‘); //指示显示图片顺序 var imgNo = 1; //轮播处理 function imgskip() { //上一个圆点变为灰色 imgNav.children[imgNo - 1].children[0].classList.remove(‘current-imgNav‘); imgNo++; //最后一个的下一个显示第一个 if (imgNo == 9) { imgNo = 1; } changeimg(imgNo); } var si = setInterval(imgskip, 2000); //停止定时器 function stop() { clearInterval(si); } //开始定时器 function start() { si = setInterval(imgskip, 2000); } //鼠标移入图片处理 imgDiv.onmouseover = function() { stop(); } //鼠标移出图片处理 imgDiv.onmouseout = function() { start(); } //给每个圆点绑定事件 for (var imgNavNo = 1; imgNavNo <= 8; imgNavNo++) { //声明方法并立即执行 (function(imgNavNo) { //鼠标移入圆点处理 imgNav.children[imgNavNo - 1].onmouseover = function() { //停止轮播 clearInterval(si); //修改图片地址 // imgView.src="img/"+k+".jpg"; //隐藏所有图片 for (var c = 0; c < imgViewClass.length; c++) { imgViewClass[c].classList.remove(‘current-img‘); } //显示当前图片 imgViewClass[imgNavNo - 1].classList.add(‘current-img‘); //修改标题 imgTitle.children[0].innerHTML = str[imgNavNo - 1]; //原来显示圆点变为灰色 imgNav.children[imgNo - 1].children[0].classList.remove(‘current-imgNav‘); //当前圆点变为选中色 this.children[0].classList.add(‘current-imgNav‘); }; //鼠标移出圆点处理 imgNav.children[imgNavNo - 1].onmouseout = function() { //修改图片显示顺序指示 imgNo = imgNavNo; //重启轮播 si = setInterval(imgskip, 2000); }; })(imgNavNo); } //鼠标移入箭头处理 backward.onmouseover = function() { stop(); } forward.onmouseover = function() { stop(); } //鼠标移出箭头处理 backward.onmouseout = function() { start(); } forward.onmouseout = function() { start(); } //鼠标点击上一页处理 backward.onclick = function() { //上一个圆点变为灰色 imgNav.children[imgNo - 1].children[0].classList.remove(‘current-imgNav‘); imgNo--; //第一个的上一个显示最后一个 if (imgNo == 0) { imgNo = 8; } changeimg(imgNo); } //鼠标点击下一页处理 forward.onclick = function() { //上一个圆点变为灰色 imgNav.children[imgNo - 1].children[0].classList.remove(‘current-imgNav‘); imgNo++; //最后一个的下一个显示第一个 if (imgNo == 9) { imgNo = 1; } changeimg(imgNo); } //图片切换 function changeimg(imgNo) { //隐藏所有图片 for (var c = 0; c < imgViewClass.length; c++) { imgViewClass[c].classList.remove(‘current-img‘); } //显示当前图片 imgViewClass[imgNo - 1].classList.add(‘current-img‘); //修改标题 imgTitle.children[0].innerHTML = str[imgNo - 1]; //当前圆点变为选中色 imgNav.children[imgNo - 1].children[0].classList.add(‘current-imgNav‘); } } </script> </html>
原文：https://www.cnblogs.com/yuqiaoQA/p/11899407.html