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 相关文章推荐
jQuery基础知识小结
Dec 22 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
何时使用Map来代替普通的JS对象
详解Js模块化的作用原理和方案
详解JavaScript中的执行上下文及调用堆栈
JavaScript实现淘宝商品图切换效果
JavaScript实现显示和隐藏图片
Apr 29 #Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
You might like
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP pear安装配置教程
2016/05/14 PHP
定义select的边框颜色
2008/04/28 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
python之super的使用小结
2018/08/13 Python
Python类继承和多态原理解析
2020/02/05 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
计算机专业自荐信
2013/10/14 职场文书
工作鉴定评语
2014/05/04 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
收费员岗位职责
2015/02/14 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Oracle锁表解决方法的详细记录
2022/06/05 Oracle