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 相关文章推荐
js 颜色选择器(兼容firefox)
Mar 05 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
json传值以及ajax接收详解
May 24 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
何时使用Map来代替普通的JS对象
详解Js模块化的作用原理和方案
详解JavaScript中的执行上下文及调用堆栈
JavaScript实现淘宝商品图切换效果
JavaScript实现显示和隐藏图片
Apr 29 #Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
You might like
php 购物车的例子
2009/05/04 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
python处理PHP数组文本文件实例
2014/09/18 Python
python pygame模块编写飞机大战
2018/11/20 Python
Django实现学生管理系统
2019/02/26 Python
set在python里的含义和用法
2019/06/24 Python
荟萃全球保健品:维他购
2018/05/09 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
建龙钢铁面试总结
2014/04/15 面试题
演讲稿格式
2014/04/30 职场文书
新教师岗前培训方案
2014/06/05 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
详细了解MVC+proxy
2021/07/09 Java/Android
JavaScript 数组去重详解
2021/09/15 Javascript
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js