JS实现头条新闻的经典轮播图效果示例

来源：微智科技网

本文实例讲述了JS实现头条新闻的经典轮播图效果。分享给大家供大家参考，具体如下：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 *{
 margin:0;
 padding:0;
 list-style: none;
 }
 .box{
 width: 665px;
 height: 362px;
 border: solid;
 margin: 100px auto;
 position:relative ;
 }
 .left{
 width: 50px;
 height: 50px;
 border: solid white;
 border-radius: 50%;
 position: absolute;
 line-height: 50px;
 text-align: center;
 font-size: 50px;
 left:0px;
 top:180px;
 cursor: pointer;
 color: white;
 }
 .right {
 width: 50px;
 height: 50px;
 border: solid white;
 border-radius: 50%;
 position: absolute;
 line-height: 50px;
 text-align: center;
 font-size: 50px;
 right: 0px;
 top: 180px;
 cursor: pointer;
 color: white;
 }
 ul{
 width: 400px;
 height: 50px;
 margin:307px 188px;
 position: absolute;
 left:30px;
 top:24px;
 }
li{
 width: 30px;
 height: 30px;
 border: solid 1px white;
 border-radius: 50%;
 float: left;
 cursor: pointer;
 line-height: 30px;
 text-align: center;
 color: white;
}
 img{
 display: none;
 width: 665px;
 height: 362px;
 }
 .act{display: block;
 }
 .active{
 background: black;
 }
 </style>
</head>
<body>
<div class="box" id="box">
 <img src="img/1.jpg" " class="act">
 <img src="img/2.jpg" ">
 <img src="img/3.jpg" ">
 <img src="img/4.jpg" ">
 <img src="img/5.jpg" ">
 <img src="img/6.jpg" ">
 <img src="img/7.jpg" ">
 <img src="img/8.jpg" ">
 <div class="left" id="left"> < </div>
 <div class="right" id="right"> > </div>
 <ul>
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 </ul>
</div>
<script>
 window.onload=function () {
 var arrLi=document.getElementsByTagName("li");
 var arrImg=document.getElementsByTagName("img");
 var oLeft=document.getElementById("left");
 var oRight=document.getElementById("right");
 var oBox=document.getElementById("box");
 var num=0;
 f=setInterval(abc,1000);
 oBox.onmouseover=function () {
 clearInterval(f)
 }
 oBox.onmouseout=function () {
 f=setInterval(abc,1000);
 }
 for(x=0;x<arrLi.length;x++) {
 arrLi[x].index=x;
 arrLi[x].onmouseover=function () {
 for(j=0;j<arrLi.length;j++){
 arrLi[j].className="";
 arrImg[j].className="";
 }
 this.className="active";
 arrImg[this.index].className="act";
 }
 }
 oLeft.onclick=function () {
 num=num-1;
 if(num<0){
 num=arrImg.length-1
 }
 for(j=0;j<arrImg.length;j++){
 arrImg[j].className="";
 arrLi[j].className="";
 }arrImg[num].className="act";
 arrLi[num].className="active";
 }
 oRight.onclick=abc
 function abc() {
 num=num+1;
 if(num>arrImg.length-1){
 num=0
 }
 for(j=0;j<arrImg.length;j++){
 arrImg[j].className="";
 arrLi[j].className="";
 }arrImg[num].className="act";
 arrLi[num].className="active";
 }
 }
</script>
</body>
</html>

本机测试运行效果如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。