仿百度新闻首页轮播图
用原生js实现百度新闻首页轮播图，动画部分参考原版 ，代码如下；
<!--模仿百度新闻首页轮播图制作，完成于2019-03-28--> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *, :after, :before { padding: 0px; margin: 0px; font-size: 100%; } .imgDiv, img { width: 560px; height: 305px; } li { list-style: none; float: left; color: darkgray; 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);" sn="1">●</a></li> <li><a href="javascript:void(0);" sn="2">●</a></li> <li><a href="javascript:void(0);" sn="3">●</a></li> <li><a href="javascript:void(0);" sn="4">●</a></li> <li><a href="javascript:void(0);" sn="5">●</a></li> <li><a href="javascript:void(0);" sn="6">●</a></li> <li><a href="javascript:void(0);" sn="7">●</a></li> <li><a href="javascript:void(0);" sn="8">●</a></li> </ul> </div> </body> <script type="text/javascript"> //图片标题数组 var titlestr = [ '候鸟迁徙 成壮观过境潮', '美国得州一石油化工厂着火 黑烟滚滚遮天蔽日', '香格里拉 美景如画', '气旋炸弹”袭击美国中西部 建筑遭洪水“没顶”', '埃及阿斯旺的旅游市场', '纽约哈得孙河畔新景观', '吉尔吉斯斯坦举办“马背叼羊”赛 骑手飞身夺羊', '都柏林庆祝圣帕特里克节' ]; //窗口加载完成执行 window.onload = function() { var imgTitle = document.getElementById('imgTitle'); var imgNav = document.getElementById('imgNav'); var imgDiv = document.getElementById('imgDiv'); var imgViewClass = document.getElementsByClassName('imgView'); var backward = document.getElementById('backward'); var forward = document.getElementById('forward'); //指示显示图片顺序 var imgNo = 1; //显示目标序号对应图片、标题、圆点 function displayobj(targetNo) { //显示目标图片 imgViewClass[targetNo - 1].classList.add('current-img'); //修改标题 imgTitle.children[0].innerHTML = titlestr[targetNo - 1]; //当前圆点变为选中色 imgNav.children[targetNo - 1].children[0].classList.add('current-imgNav'); } //隐藏目标序号对应图片、标题、圆点 function hideobj(targetNo) { //隐藏目标图片 imgViewClass[targetNo - 1].classList.remove('current-img'); //隐藏标题 imgTitle.children[0].innerHTML = ''; //目标圆点变为灰色 imgNav.children[targetNo - 1].children[0].classList.remove('current-imgNav'); } //显示首页 displayobj(imgNo); //轮播处理 function imgskip() { //隐藏当前内容 hideobj(imgNo); imgNo++; //最后一个的下一个显示第一个 if (imgNo == 9) { imgNo = 1; } //显示当前内容 displayobj(imgNo); } //创建轮播定时器 var si = setInterval(imgskip, 2000); //停止定时器 function stopsi() { clearInterval(si); } //开始定时器 function startsi() { si = setInterval(imgskip, 2000); } //鼠标移入图片处理 imgDiv.onmouseover = function() { stopsi(); } //鼠标移出图片处理 imgDiv.onmouseout = function() { startsi(); } //鼠标移入箭头处理 backward.onmouseover = function() { stopsi(); } forward.onmouseover = function() { stopsi(); } //鼠标移出箭头处理 backward.onmouseout = function() { startsi(); } forward.onmouseout = function() { startsi(); } //使用事件代理，给上级节点绑定圆点移入移出事件，2020-01-03 imgNav.onmouseover = function(e) { e = e || window.event; //IE window.event var t = e.target || e.srcElement; //目标对象 //上级节点不处理 if (t.tagName != 'A') return; var sn = t.getAttribute('sn'); //停止轮播 stopsi(); //隐藏当前内容 hideobj(imgNo); //显示移入内容 displayobj(sn); } imgNav.onmouseout = function(e) { e = e || window.event; //IE window.event var t = e.target || e.srcElement; //目标对象 //上级节点不处理 if (t.tagName != 'A') return; var sn = t.getAttribute('sn'); //修改图片显示顺序 imgNo = sn; //重启轮播 startsi(); } //鼠标点击左箭头处理 backward.onclick = function() { hideobj(imgNo); imgNo--; //第一个的上一个显示最后一个 if (imgNo == 0) { imgNo = 8; } displayobj(imgNo); } //鼠标点击右箭头处理，和轮播效果一样，2019-11-21 forward.onclick =function() { imgskip(); } } </script> </html>
上级
浙公网安备 33010602011771号