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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
Node.js实现数据推送
Apr 14 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
何时使用Map来代替普通的JS对象
详解Js模块化的作用原理和方案
详解JavaScript中的执行上下文及调用堆栈
JavaScript实现淘宝商品图切换效果
JavaScript实现显示和隐藏图片
Apr 29 #Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
spyder常用快捷键(分享)
2017/07/19 Python
python paramiko模块学习分享
2017/08/23 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
matplotlib实现区域颜色填充
2019/03/18 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
求职意向书
2014/04/01 职场文书
介绍信怎么写
2015/05/05 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
在Docker容器中部署SQL Server
2022/04/11 Servers