JavaScript 轮播图
JavaScript 轮播图
phpweishunlong 发表于11个月前
JavaScript 轮播图
  • 发表于 11个月前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

<?php


//从数据库查询得到图片路径
$picArr = array(
	'./img/58bb9f4bNf76d342d.jpg',
	'./img/58b9260eN0aea7d3e.jpg',
);

$picStr = json_encode($picArr);


?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>


<img src="" alt="">
<div id="turn">

	<img src="./img/58bb9f4bNf76d342d.jpg" alt="">
</div>

<script>


//通过自调函数将功能封装起来
(function () {

	// 轮播图的思路: 每隔2s,就改变图片src的内容

	var turn = document.getElementById('turn');

	var img = turn.getElementsByTagName('img')[0];
	// console.log(img);

	//var imgs = <?php //echo '123';?>

	//得到PHP给的图片地址
	var picArr = <?php echo $picStr;?>;

	var i = 0;

	//每2s改变一下img标签的src属性的值
	setInterval(function () {


		if (i >= picArr.length ) {

			i = 0;
		}


		img.src = picArr[i];

		i++;
	}, 1000);

})();





</script>
</body>
</html>
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 64
码字总数 26259
×
phpweishunlong
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: