js原生学习-初级-练习07

来源：互联网发布：移动平均算法编辑：程序博客网时间：2024/06/06 18:50
js原生学习-初级-练习07
图片切换之客控制切换方式图片切换
图片只能到最后一张或第一张切换
<>图片文字加载中......
数量正在计算中......
h3{text-align: center;}#top{width: 400px;height: 40px;margin: 10px auto;text-align: center;line-height: 40px;}#tips{width: 400px;height: 40px;margin: 0 auto;text-align: center;line-height: 40px;}#content{width: 400px;height: 400px;border: 10px solid #ccc;margin: 10px auto 0;position: relative;background: #f1f1f1;}#content a{width: 40px;height: 40px;background: #000;/*border: 5px solid #fff;*/position: absolute;top: 175px;text-align: center;text-decoration: none;line-height: 36px;color: #fff;font-size: 30px;font-weight: bold;filter: alpha(opacity:20);opacity: 0.2;}#content a:hover{filter: alpha(opacity:90);opacity: 0.9;}#prev{left: 10px;}#next{right: 10px;}#text, #span1{position: absolute;left: 0;width: 400px;height: 30px;line-height: 30px;text-align: center;color: #fff;background: #000;filter: alpha(opacity:60);opacity: 0.6;}#text{bottom: 0;margin: 0;}#span1{top: 0;}#img1{width: 400px;height: 400px;}window.onload = function(){//alert(1);var oPrev = document.getElementById('prev');var oNext = document.getElementById('next');var oText = document.getElementById('text');var oSpan = document.getElementById('span1');var oImg = document.getElementById('img1');var oOrder = document.getElementById('order');var oLoop = document.getElementById('loop');var oTips = document.getElementById('tips');var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];var arrText = ['游戏MM','人造运动员','性感美女','古装游戏美女'];var num = 0;//初始化function fnTab(){oSpan.innerHTML = num + 1 + '/' + arrText.length;oImg.src = arrUrl[num];oText.innerHTML = arrText[num]; }fnTab();oOrder.onclick = function(){oTips.innerHTML = '图片只能到最后一张或第一张切换';oPrev.onclick = function(){num --;if (num == -1) {num = 0;alert('不能再向前了~已经是第一张~~');}fnTab();}oNext.onclick = function(){num ++;if (num == arrText.length) {num = arrText.length -1;alert('已经是最后一张了~~');}fnTab();}}oLoop.onclick = function(){oTips.innerHTML = '图片可从第一张跳转到最后一张循环切换';oPrev.onclick = function(){num --;if (num == -1) {num = arrText.length - 1;}fnTab();}oNext.onclick = function(){num ++;if (num == arrText.length) {num = 0;}fnTab();}}};
js原生学习-初级-练习07
阅读全文
0 0