Pure JavaScript handwritten image carousel code-JS Tutorial-php.cn

Pure JavaScript handwritten image carousel code

高洛峰

Release： 2016-12-09 15:09:49

Original

1457 people have browsed it

No more nonsense, let me directly post the js code to implement the handwritten picture carousel. The code is very simple. The specific code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js图片轮播切换</title>
<style type="text/css">
　　.imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;}
　　.imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;}
　　.numStyle{top: 0px;}
　　.textStyle{bottom: 0px;}
　　.imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;}
　　.imgCon .prev{left: 10px;}
　　.imgCon .next{left: 370px;}
　　img{width:400px;height: 400px;}
</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"/>
　　</div>
　　<script type="text/javascript">
　　　　var numCon = document.getElementById(&#39;numCon&#39;);
　　　　var textCon = document.getElementById(&#39;textCon&#39;);
　　　　var prev = document.getElementById(&#39;prev&#39;);
　　　　var next = document.getElementById(&#39;next&#39;);
　　　　var imgChange = document.getElementById(&#39;imgChange&#39;);
　　　　var imgArr = [&#39;img/ad1.jpg&#39;,&#39;img/ad2.jpg&#39;,&#39;img/ad3.jpg&#39;,&#39;img/ad4.jpg&#39;];
　　　　var imgText = [&#39;第一张&#39;,&#39;第二张&#39;,&#39;第三张&#39;,&#39;第四张&#39;];
　　　　var num = 0;
　　　　//数字 图片变化函数
　　　　function imgTab(){
　　　　　　numCon.innerHTML = num+1 + &#39;/&#39; + imgArr.length; //数字变化
　　　　　　textCon.innerHTML = imgText[num]; //底部文字内容变化
　　　　　　imgChange.src = imgArr[num]; //图片变化
　　　　}
　　　　imgTab();
　　　　//下一张 按钮
　　　　next.onclick = function(){
　　　　num++;
　　　　if(num == imgArr.length){
　　　　　　num = 0;
　　　　}
　　　　imgTab();
　　　　}
　　　　//上一张 按钮
　　　　prev.onclick = function(){
　　　　　　num--;
　　　　if(num == -1){
　　　　　　num = imgArr.length-1;
　　　　}
　　　　imgTab();
　　　　}
　　</script>
</body>
</html>

Copy after login