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 相关文章推荐
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
Vue实现简单的留言板
Oct 23 Javascript
何时使用Map来代替普通的JS对象
详解Js模块化的作用原理和方案
详解JavaScript中的执行上下文及调用堆栈
JavaScript实现淘宝商品图切换效果
JavaScript实现显示和隐藏图片
Apr 29 #Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
You might like
php面向对象值单例模式
2016/05/03 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
javascript基础知识
2016/06/07 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python使用asyncio包处理并发详解
2017/09/09 Python
Python代码太长换行的实现
2019/07/05 Python
pytorch构建多模型实例
2020/01/15 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
PHP中如何使用Cookie
2015/10/28 面试题
中医专业应届生求职信
2013/11/17 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
《称赞》教学反思
2016/02/17 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python