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

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

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

*{

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;

}

<

>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

window.οnlοad=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.οnmοuseοver=function () {

clearInterval(f)

}

oBox.οnmοuseοut=function () {

f=setInterval(abc,1000);

}

for(x=0;x

arrLi[x].index=x;

arrLi[x].οnmοuseοver=function () {

for(j=0;j

arrLi[j].className="";

arrImg[j].className="";

}

this.className="active";

arrImg[this.index].className="act";

}

}

oLeft.οnclick=function () {

num=num-1;

if(num<0){

num=arrImg.length-1

}

for(j=0;j

arrImg[j].className="";

arrLi[j].className="";

}arrImg[num].className="act";

arrLi[num].className="active";

}

oRight.οnclick=abc

function abc() {

num=num+1;

if(num>arrImg.length-1){

num=0

}

for(j=0;j

arrImg[j].className="";

arrLi[j].className="";

}arrImg[num].className="act";

arrLi[num].className="active";

}

}

本机测试运行效果如下：

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