百度新闻的轮播（js）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.all{
margin: 50px auto;
width: 560px;
height:305px;
font-size:0;
position: relative;
}
img{
width: 560px;
height:305px;
display:none;
}
.act{
display: block;
}
ul{
position: absolute;
right: 20px;
bottom: 23px;
}
li{
list-style:none;
width:10px;
height:10px;
float: left;
background:rgba(255,255,255,0.5);
margin-left: 10px;
border-radius: 50%;
cursor: pointer;
}
span{
position: absolute;
left:10px;
bottom:13px;
font-size:14px;
display: none;
color:white;
font-weight:bold;
}
.font{
display: block;
}
.col{
width: 12px;
height:12px;
background: rgba(67,114,193,0.8)
}
.arrows_l{
width:40px;
height:40px;
border-radius:50%;
position: absolute;
left:10px;
top: 125px;
}
.arrows_r{
width:40px;
height:40px;
border-radius:50%;
position: absolute;
right: 10px;
top:125px;

}
.arrows_l:hover{
transition: 0.5s;
background:rgba(255,255,255,0.8)
}
.arrows_r:hover{
transition: 0.5s;
background:rgba(255,255,255,0.8)
}
.arrows_l:hover .lp_1{
transition: 0.5s;
background-color: red;
transform: rotate(25deg);
top:21px;
left:8px;
}
.arrows_l:hover .lp_2{
transition: 0.5s;
background-color: red;
transform: rotate(-25deg);
top:13.5px;
left:8px;

}
.arrows_r:hover .lp_3{
transition: 0.5s;
background-color: red;
transform: rotate(25deg);
top:15px;
left:12px;
}
.arrows_r:hover .lp_4{
transition: 0.5s;
background-color: red;
transform: rotate(-25deg);
top:23px;
left:12px;
}
.lp_1{
width: 20px;
height: 3px;
transform: rotate(45deg);
background-color: white;
position: absolute;
top:25px;
left:8px;
}
.lp_2{
width: 20px;
height: 3px;
transform: rotate(-45deg);
background-color: white;
position: absolute;
top:13px;
left:8px;
}
.lp_3{
width: 20px;
height: 3px;
transform: rotate(45deg);
background-color: white;
position: absolute;
top:13px;
left:12px;
}
.lp_4{
width: 20px;
height: 3px;
transform: rotate(-45deg);
background-color: white;
position: absolute;
top:25px;
left:12px;
}
</style>
</head>
<body>
<div class="all">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=abbeee7efb03918fd1d139ca613c264b/3b87e950352ac65cd8a1dfedf7f2b21192138a8c.jpg" alt="" class="act">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=47d56276fed3572c60e298dcba126352/5ab5c9ea15ce36d3983db6af36f33a87e950b177.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=10ac85a811950a7b73354ac43ad0625c/6159252dd42a2834683fe89557b5c9ea14cebf97.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=eed7e10a4a2309f7e16fa912420f0c39/96dda144ad345982132a110c00f431adcaef8488.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=87ad3e554f166d223e77119476220945/cb8065380cd79123458b2deaa1345982b3b780c1.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=fa6a75bd6f2762d0863ea0bf90ed0849/b7003af33a87e95066ac39f21c385343faf2b4f1.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=9ba2ed906b09c93d01f20af7af3cf8bb/d01373f082025aaff6bad955f7edab64024f1aa7.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=6b42357cd939b6004bce0bb7d9513526/91ef76c6a7efce1be39afe55a351f3deb58f65ff.jpg" alt="">
<span class="font">青岛欢迎你，上合</span>
<span>一心想要“旗开得胜”的妈妈们</span>
<span>特战队员反劫机演练与“恐怖分子”斗战斗勇</span>
<span>世界杯美食也来凑热闹俄罗斯足球造型面包亮相</span>
<span>习近平同吉尔吉斯斯坦总统热恩别科夫举行会谈</span>
<span>日本舞姬桥上放生鱼苗引围观</span>
<span>全球高温：伊拉克首都市民当众淋水</span>
<span>上合青岛峰会志愿者培训画面</span>
<ul>
<li class="col"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="arrows_l" id="dian_1"><div class="lp_1"></div><div class="lp_2"></div></div>
<div class="arrows_r" id="dian_2"><div class="lp_3"></div><div class="lp_4"></div></div>
</div>
<script>
var odiv=document.getElementsByTagName("div")[0];
var pic=document.getElementsByTagName('img');
var wrt=document.getElementsByTagName('span');
var che=document.getElementsByTagName('li');
var ck_1=document.getElementById('dian_1');
var ck_2=document.getElementById('dian_2');
num=0;
odiv.onmouseover=function () {
clearInterval(times)
};
odiv.onmouseout=function () {
times=setInterval(abc,2000);
};
times=setInterval(abc,2000);
for(var i=0;i<che.length;i++){
che[i].index=i;
che[i].onmouseover=adc;
function adc() {
for(var q=0;q<che.length;q++){
che[q].className='';
pic[q].className='';
wrt[q].className=''
}
this.className='col';
pic[this.index].className='act';
wrt[this.index].className='font';
num=this.index;
}
}
//右
ck_2.onclick=abc;
function abc() {
num=num+1;
for(var x=0;x<pic.length;x++){
pic[x].className='';
wrt[x].className='';
che[x].className=''
}
pic[num].className='act';
che[num].className='col';
wrt[num].className='font';
if(num==7){
num=-1
}
};
//左
ck_1.onclick=function () {
num=num-1;
for(var x=0;x<pic.length;x++){
pic[x].className='';
wrt[x].className='';
che[x].className=''
}
if(num<0){
num=pic.length-1;
}
pic[num].className='act';
che[num].className='col';
wrt[num].className='font';
}
</script>
</body>
</html>

百度新闻的轮播（js）

猜你喜欢