js实现轮播图

avatar 2017年02月27日20:29:20 1 1901 views
博主分享免费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>

图片路径和超链接路径以及显示图片张数可以自行修改和添加。

 
  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
匿名评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0