JavaScript实现简单图片切换


Posted in Javascript onApril 29, 2021

本文实例为大家分享了JavaScript实现简单图片切换的具体代码,供大家参考,具体内容如下

下边给出几种方法进行图片切换:

方法一 (小白专用款!简单易懂) 下边附上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换2</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 450px;
            height: 70px;
            padding-top: 450px;
            background: url("img/big_pic01.jpg") no-repeat;
        }
        #box ul li{
            float: left;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="item1">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li id="item2">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li id="item3">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li id="item4">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li id="item5">
                <img src="img/pic05.webp">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 初学者 小白 书写方式
        // 1.获取事件源

        var item1 = document.getElementById("item1");
        var item2 = document.getElementById("item2");
        var item3 = document.getElementById("item3");
        var item4 = document.getElementById("item4");
        var item5 = document.getElementById("item5");
        var oBos = document.getElementById("box");

        // 2.添加事件
        item1.onmouseover = function (){
         //当鼠标悬浮在相关id上时,图片指向路径进行改变
            oBos.style.background = "url('img/big_pic01.jpg') no-repeat";
        }
        item2.onmouseover = function (){
            oBos.style.background = "url('img/big_pic02.jpg') no-repeat";
        }
        item3.onmouseover = function (){
            oBos.style.background = "url('img/big_pic03.jpg') no-repeat";
        }
        item4.onmouseover = function (){
            oBos.style.background = "url('img/big_pic04.jpg') no-repeat";
        }
        item5.onmouseover = function (){
            oBos.style.background = "url('img/big_pic05.jpg') no-repeat";
        }

    </script>
</body>
</html>

上边的JS部分代码可能比较麻烦,容易造成代码冗余。

那么我们进行修改下后,来看看方法二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换2</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 450px;
            height: 70px;
            padding-top: 450px;
            background: url("img/big_pic01.jpg") no-repeat;
        }
        #box ul li{
            float: left;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="item1">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li id="item2">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li id="item3">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li id="item4">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li id="item5">
                <img src="img/pic05.webp">
            </li>
        </ul>
    </div>
    <script type="text/javascript">

        // 1.获取事件源 这样获取事件源省去了大量的var的定义的过程
        function $(id){
            return typeof id === "string"?document.getElementById(id):null;
        }
        // 改变背景图  liId是指向的id imgSrc是将背景图传入的参数
        function changebgcImg(liId,imgSrc){
            // 2.添加事件
            $(liId).onmouseover = function (){
                // 3.改变背景图
                $("box").style.background = imgSrc;
            }
        }
        changebgcImg("item1",'url("img/big_pic01.jpg") no-repeat');
        changebgcImg("item2",'url("img/big_pic02.jpg") no-repeat');
        changebgcImg("item3",'url("img/big_pic03.jpg") no-repeat');
        changebgcImg("item4",'url("img/big_pic04.jpg") no-repeat');
        changebgcImg("item5",'url("img/big_pic05.jpg") no-repeat');

    </script>
</body>
</html>

可以看到,方法二比方法一所用JS代码要少。

接着上边的进行修改,我们可以来看看方法三:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换完整版</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 450px;
            height: 70px;
            padding-top: 450px;
            background: url("img/big_pic01.jpg") no-repeat;
        }
        #box ul li{
            float: left;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="item">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic05.webp">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 1.获取事件源
        function $(id){
            return typeof id === 'string'? document.getElementById(id):null;
        }
        // 获取下边的所有名为item的li标签
        var items = document.getElementsByClassName("item");
        // console.log(items);
        for (var i=0;i<items.length;i++){
            var item = items[i];
            item.index = i+1;
            items[i].onmouseover = function (){
                $("box").style.background = `url("img/big_pic0${this.index}.jpg") no-repeat`
                // 不可以直接设置${i}而要重新定义个变量item是因为在function中调用的i是全局变量,i在for循环后会一直指向5
                // $("box").style.background = `url("img/big_pic0${i}.jpg") no-repeat`
            }
        }
    </script>
</body>
</html>

三种方式,都可以实现图片切换效果(第一种如果图片数目多,要展示的图片也不一样多的话不推荐使用),图片切换效果如下:

JavaScript实现简单图片切换

我还有篇博客也是进行图片切换效果的,所用方式与此三种有些区别,可以进行参考,就先不进行合并了:JavaScript实现淘宝商品图切换效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 刷新全集常用代码
Nov 22 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
JS实现音量控制拖动
Jan 15 Javascript
何时使用Map来代替普通的JS对象
详解Js模块化的作用原理和方案
详解JavaScript中的执行上下文及调用堆栈
JavaScript实现淘宝商品图切换效果
JavaScript实现显示和隐藏图片
Apr 29 #Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
用PHP开发GUI
2006/10/09 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
Python中装饰器的一个妙用
2015/02/08 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Django csrf 验证问题的实现
2018/10/09 Python
python实现简单登陆系统
2018/10/18 Python
基于python实现KNN分类算法
2020/04/23 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
自主招生英文自荐信
2015/03/25 职场文书