suchen

Heim >Web-Frontend >js-Tutorial >Reiner handgeschriebener JavaScript-Bildkarussellcode

Reiner handgeschriebener JavaScript-Bildkarussellcode

高洛峰
高洛峰Original
2016-12-09 15:09:491444Durchsuche

Ohne weitere Umschweife werde ich einfach den js-Code veröffentlichen, um ein handgeschriebenes Bildkarussell zu realisieren. Der spezifische Code lautet wie folgt: 

<!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>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Basierend auf der nativen JS-Fade-Funktionskapselung (kompatibel mit IE)Nächster Artikel：Basierend auf der nativen JS-Fade-Funktionskapselung (kompatibel mit IE)

In Verbindung stehende Artikel

Mehr sehen