轮播图源代码

呵末颜

2024-04-24 帮助1人

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<style>
#fudongguanggao{
width:200px;
height:133px;
position:fixed;
right:10px;
top:40px;
overflow:hidden;
}
#fudongguanggao a{
position:absolute;
top:0;
right:0;
border:solid 1px gray;
background-color:#d0d0d0;
padding:0 5px;
}
img{
width: 500px;
height: 270px;
}
</style>
</head>
<body>
<div id="content" style="margin: 0px auto;width: 540px;height: 265px;">
<div class="scroll_top"></div>
<div class="scroll_mid">
<img src="img/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" />
<div id="scroll_number">
<ul>
<li id="scroll_number_1" onmouSEO（(Search Engine Optimization)）ver="stop(1)" onmouSEO（(Search Engine Optimization)）ut="change_img()" style="background:orange;" >1</li>
<li id="scroll_number_2" onmouSEO（(Search Engine Optimization)）ver="stop(2)" onmouSEO（(Search Engine Optimization)）ut="change_img()" >2</li>
<li id="scroll_number_3" onmouSEO（(Search Engine Optimization)）ver="stop(3)" onmouSEO（(Search Engine Optimization)）ut="change_img()" >3</li>
<li id="scroll_number_4" onmouSEO（(Search Engine Optimization)）ver="stop(4)" onmouSEO（(Search Engine Optimization)）ut="change_img()" >4</li>
<li id="scroll_number_5" onmouSEO（(Search Engine Optimization)）ver="stop(5)" onmouSEO（(Search Engine Optimization)）ut="change_img()" >5</li>
<li id="scroll_number_6" onmouSEO（(Search Engine Optimization)）ver="stop(6)" onmouSEO（(Search Engine Optimization)）ut="change_img()" >6</li>
</ul>
</div>
</div>
<div class="scroll_end"></div>
</div>
<script type="text/javascript">
window.onload = function(){
change_img();
}
let times;
function change_img(){
times = setInterval(banner_change,1000);
}
let i = 1;
let dd_scroll;
function banner_change(){
if(i >= 7){
i = 1;
}
dd_scroll = document.getElementById("dd_scroll");
dd_scroll.src = "img/dd_scroll_" i ".jpg";
bg_color();
i ;
}
function bg_color(){
let scroll_number = document.getElementById("scroll_number");
let lis = scroll_number.getElementsByTagName("li");
let len = lis.length;
for(let i=0; i<len; i ){
lis[i].style.background = "";
}
let scroll_number_change = document.getElementById("scroll_number_" i);
scroll_number_change.style.background = "orange";
}
function stop(num){
clearInterval(times);
i = num;
banner_change();
}
</script>
</body>
</html>

一个简单的轮播图,图片的名称必须是dd_scroll_1.jpg到dd_scroll_6.jpg

如果想自己命名的话,在源代码中自己修改就可以了

这篇好文章是转载于：学新通技术网

轮播图源代码

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐