JQ实现简单的轮播图
下面我们将使用Jquery实现简单的轮播图功能，以下为示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
#img1{
width:380px;
border:solid 5px orange;
position: relative;
}
#img1 img{
display: block;
}
#img1 div{
border:solid 1px orange;
background: #f3f3f3;
padding: 1px 5px;
position: absolute;
bottom: 8px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="img1">
<img src="img/1.jpg" alt="图片一" width="380" />
<div style="right: 60px;background: orange;">1</div>
<div style="right: 35px;">2</div>
<div style="right: 10px;">3</div>
</div>
<script src="jquery.min.js"></script>
<script>
var arr = ['img/1.jpg','img/2.jpg','img/3.jpg'];
var k = 0;
var t;
//每秒对img中src进行赋值，从arr中取值
function changeSrc()
{
k++;
if(k > 2){
k = 0;
}
var path = arr[k];
console.log(path);
$("#img1 img").attr("src",path);
//改变位置效果
$("#img1 div").css('background','');
$("#img1 div:eq("+ k +")").css('background','orange');
t = setTimeout(changeSrc,1000)
}
$(function(){
t = setTimeout(changeSrc,1000);
$("#img1").mouseenter(function(){
console.log('清除了定时器');
clearTimeout(t);
});
$("#img1").mouseleave(function(){
console.log('开始了定时器');
t = setTimeout(changeSrc,1000);
})
});
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-11-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读