javascript实现图片切换效果

发布时间：2020-06-16 17:32:26 作者：元一
来源：亿速云阅读：401

简介：

javaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

实现：

点击可以实现切换。当然，也可以设置定时函数实现轮播的效果。

代码：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片切换</title>
</head>
<style>
body{
background-color: black;
}
.wp{
width: 632px;
height: 950px;
margin: 0 auto;
background-color: #ffffff;
position: relative;
}
.div_wp{
position: absolute;
top: 110px;
left: 20px ;
width: 572px;
height: 800px;
margin: 0 auto;
background-color: #ffffff;
border: 10px solid #888888;
}
a{
width: 30px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
text-decoration: none;
/ background-color: black; /
position: absolute;
top:405px;
display: block;
background-color: #999999;
}
#pre{
left: 0;
}
#next{
right: 0;
}
#span,#text2{
position: absolute;
width: 100%;
height: 50px;
background-color: #999999;
text-align: center;
line-height: 50px;
font-size: 30px;
}
#span{
top: 0;
}
#text2{
bottom: 0;
margin: 0;
}
#img{
width: 572px;
height: 800px;
}
input{
width: 100px;
height: 30px;
position: absolute;
top: 20px;
}
#btn1{
left: 190px;
}
#btn2{
right: 190px;
}
#text1{
position: absolute;
top: 50px;
left: 200px;
}
</style>
<script>
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oText1 = document.getElementById('text1');
var oSpan = document.getElementById('span');
var oPre = document.getElementById('pre');
var oNext = document.getElementById('next');
var oText2 = document.getElementById('text2');
var oImg = document.getElementById('img');


    var arrUrl = ['https://c-ssl.duitang.com/uploads/item/201708/29/20170829092524_t8mf4.thumb.700_0.jpeg',
                'https://cache.yisu.com/upload/information/20200302/54/8722.jpg',
                'https://cache.yisu.com/upload/information/20200302/54/8723.jpg'];
    var arrText = ['李沁','乔欣','宋祖儿'];
    var arrText1=['图片可从最后一张跳转到第一张','图片只能到最后一个或第一张切换']

    var num = 0;
    var onoff = true;
    function frimg(){
        oSpan.innerHTML = num+1 +'/'+ arrUrl.length;
        oText2.innerHTML = arrText[num];
        oImg.src = arrUrl[num];
        oText1.innerHTML = arrText1[0];

    }

    frimg();

    oBtn1.onclick = function(){
        onoff = true;
        oText1.innerHTML = arrText1[0];
    }
    oBtn2.onclick = function(){
        onoff=false;
        oText1.innerHTML =arrText1[1];
    }

    oPre.onclick = function(){
        num--;
        if(num ==-1){
            if(onoff){
                num = arrUrl.length-1;
            }else{
                alert('已经是第一张啦~')
                num= 0;
            }

        }
        frimg(); 

    };

    oNext.onclick = function(){
        num++;
        if(num == arrUrl.length){
            if(onoff){
                num = 0;
            }else{
                alert('已经到最后一张啦~')
                num = arrUrl.length-1;
            }
        }        
        frimg();    }
}
</script>
<body>
<div class="wp">
<input type="button" value="循环切换" id="btn1">
<input type="button" value="顺序切换" id="btn2">
<p id="text1"></p>
<div class="div_wp">
<span id="span"></span>
<a id="pre" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="text2"></p>
<img src="02作业-imgs/img1.jpg" alt="" id="img">
</div>
</div>
</body>
</html>

javascript实现图片切换效果

相关阅读