博主分享免费Java教学视频，B站账号：Java刘哥
之前群里有个朋友问我如何让他的广告位的图片实现轮播，下面我抛砖引玉下。直接贴代码啦
图片路径和超链接路径以及显示图片张数可以自行修改和添加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<a href="" id="ad_url" target="_blank"><img src="" alt="" id="ad_img"></a>
<script type="text/javascript">
var imgs = new Array();
var imgs_url = new Array();
//放图片地址
imgs[0] = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1799788101,1456112001&fm=23&gp=0.jpg";
imgs[1] = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4077451546,3326114836&fm=23&gp=0.jpg";
imgs[2] = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3105041861,1691488416&fm=23&gp=0.jpg";
//放图片路径
imgs_url[0] = "https://www.baidu.com";
imgs_url[1] = "http://liuyanzhao.com";
imgs_url[2] = "https://segmentfault.com";
var num = 0;
setInterval(turnpic, 1000); //每隔1秒转换图片
function turnpic() {
ad_img = document.getElementById("ad_img");
ad_url = document.getElementById("ad_url");
if (num == imgs.length - 1)
num = 0;
else
num += 1;
ad_img.src = imgs[num];
ad_url.href = imgs_url[num];
}
</script>
</html>图片路径和超链接路径以及显示图片张数可以自行修改和添加。
- 微信
- 交流学习，有偿服务
-
- 博客/Java交流群
- 资源分享，问题解决，技术交流。群号：590480292
-
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助
赏