写一个图片轮播效果的Demo(自动播放)附代码
写一个图片轮播效果的Demo(自动播放)附代码
大黄大黄大黄
发布于 2018-09-14 18:13:07
发布于 2018-09-14 18:13:07
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/article/details/52916152
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js图片轮播切换</title>
<style type="text/css">
.imgCon {
width: 450px;
height: 300px;
border: 2px solid #DCDCDC;
margin: 100px auto;
position: relative;
}
.imgCon span {
display: block;
position: absolute;
left: 0;
width: 100%;
height: 30px;
background: #808080;
text-align: center;
font-size: 18px;
line-height: 30px;
}
.numStyle {
top: 0;
}
.textStyle {
bottom: 0;
}
.imgCon strong {
font-size: 30px;
color: #000000;
position: absolute;
top: 50%;
display: block;
background: gray;
cursor: pointer;
}
.imgCon .prev {
left: 10px;
}
.imgCon .next {
left: 425px;
}
img {
width: 450px;
height: 300px;
}
</style>
</head>
<body>
<div class="imgCon">
<span id="numCon" class="numStyle">加载中...</span>
<span id="textCon" class="textStyle">加载中...</span>
<strong id="prev" class="prev"><</strong>
<strong id="next" class="next">></strong>
<img src="" id="imgChange" class="imgChange"/>
</div>
<script language="JavaScript" src="jquery-2.2.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var numCon = document.getElementById('numCon');
var textCon = document.getElementById('textCon');
var imgChange = document.getElementById('imgChange');
var imgArr = ['img/ad1.jpg', 'img/ad2.jpg', 'img/ad3.jpg', 'img/ad4.jpg'];
var imgText = ['第一张', '第二张', '第三张', '第四张'];
var num = 0;
//数字 图片变化函数
function imgTab() {
numCon.innerHTML = num + 1 + '/' + imgArr.length; //数字变化
textCon.innerHTML = imgText[num]; //底部文字内容变化
imgChange.src = imgArr[num]; //图片变化
}
function nextPage() {
num++;
if (num == imgArr.length) {
num = 0;
}
imgTab();
}
var t;
t = window.setInterval(nextPage, 1000);
$("html").click(function (e) {
//alert(e.target);
if (e.target == $("#prev")[0]) {
window.clearInterval(t);
num--;
if (num == -1) {
num = imgArr.length - 1;
}
imgTab();
t = window.setInterval(nextPage, 1000);
}
else if (e.target == $("#next")[0]) {
window.clearInterval(t);
num++;
if (num == imgArr.length) {
num = 0;
}
imgTab();
t = window.setInterval(nextPage, 1000);
}
});
});
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016年10月24日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读