温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

javascript实现图片切换效果

发布时间:2020-06-16 17:32:26 阅读:463 作者:元一 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

简介:

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>

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×