JS實現頭條新聞的經典輪播圖效果示例

來源：懂視網責編：小采時間：2020-11-27 22:01:28

JS實現頭條新聞的經典輪播圖效果示例

JS實現頭條新聞的經典輪播圖效果示例:本文實例講述了JS實現頭條新聞的經典輪播圖效果。分享給大家供大家參考，具體如下： <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content

推薦度：

點擊下載本文 文檔為doc格式

導讀JS實現頭條新聞的經典輪播圖效果示例:本文實例講述了JS實現頭條新聞的經典輪播圖效果。分享給大家供大家參考，具體如下： <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content

本文實例講述了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" alt="" class="act">
 <img src="img/2.jpg" alt="">
 <img src="img/3.jpg" alt="">
 <img src="img/4.jpg" alt="">
 <img src="img/5.jpg" alt="">
 <img src="img/6.jpg" alt="">
 <img src="img/7.jpg" alt="">
 <img src="img/8.jpg" alt="">
 <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程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS實現頭條新聞的經典輪播圖效果示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：新聞實例輪播圖

熱門焦點

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

JS實現頭條新聞的經典輪播圖效果示例

JS實現頭條新聞的經典輪播圖效果示例

JS實現頭條新聞的經典輪播圖效果示例

最新推薦

猜你喜歡

熱門推薦