精华内容
下载资源
问答
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /* 1.... 2.... 3....// alert("要切换了") var im
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			/*
    				1. 事件: 点击事件 onclick
    				2. 事件要触发函数: changeImg
    				3. 在函数中
    			*/
    			function changeImg(){
    //				alert("要切换了")
    				var img = document.getElementById("img1");
    				img.src = "../img/1-161104143944.gif";
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="点击切换图片" onclick="changeImg()" />
    		<br />
    		<img src="../img/222.jpg" id="img1" />
    	</body>
    </html>
    
    
    展开全文
  • 来实现如下的页面功能 点击下一张 通过点击上一张和下一张来切换图片 用到的知识点有 1.对数组的操作,用数组来存放img的src。附上一张简单的数组的添加删除 2.DOM中使用 document.getElementsByTagName 来获取a...

    利用js实现简单的动画效果

    js简介

    JavaScript 是世界上最流行的编程语言。

    这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

    JavaScript 是一种轻量级的编程语言。

    JavaScript 是可插入 HTML 页面的编程代码。

    JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

    JavaScript 很容易学习。

    话不多说下面我们就来点硬货通过用js

    目前我所知道的js中实现js动画的主要有两种方式,第一种是通过一张大的背景图片,然后通过不断的更换背景图片的位置来实现动画;

    还有一种是接下来要说是另外一种是通过不断改变img的src地址来实现动画的效果;这种方式是不推荐的不过,小白白可以学习下;

    来实现如下的页面功能

    AAffA0nNPuCLAAAAAElFTkSuQmCC

    点击下一张

    AAffA0nNPuCLAAAAAElFTkSuQmCC

    通过点击上一张和下一张来切换图片

    用到的知识点有

    1.对数组的操作,用数组来存放img的src。附上一张简单的数组的添加删除

    AAffA0nNPuCLAAAAAElFTkSuQmCC

    2.DOM中使用 document.getElementsByTagName 来获取a标签和img标签的id

    最后附上我写的代码 段如下

    html代码段如下

    上一张

    下一张

    样式表如下

    .content{

    width: 800px;

    height: 400px;

    overflow: hidden;

    }

    .content ul{

    width: 400px;

    list-style: none;

    }

    .content ul img{height: 400px;vertical-align: middle;}

    a{display: block;font-size: 20px;

    text-decoration: none;

    height: 40px;

    padding-left: 80px;margin-top: 50px;}

    >重点是js代码段如下 对于js初学者只需要熟悉对数组的操作

    以及对Dom中document.getElementsByTagName的使用就ok了

    var srcs = ["./img/lif1.jpg","./img/lyf2.jpg","./img/lif3.jpg"];

    var imgs = document.getElementsByTagName("img");

    var as = document.getElementsByTagName("a");

    as[0].=function(){

    srcs.unshift(srcs.pop())

    for(var i = 0;i

    {

    imgs[i].src=srcs[i]

    }

    return false;

    }

    as[1].=function(){

    srcs.push(srcs.shift())

    {

    } for(var i = 0;i

    {

    imgs[i].src=srcs[i]

    }

    return false;

    }

    最后可以设置一个简单的计时器来实现自动切换;

    >可以用异步函数settimeout以及setinterval来实现网页中的图片切换

    代码如下:

    setInterval(function(){

    srcs.unshift(srcs.pop())

    for(var i = 0;i

    {

    imgs[i].src=srcs[i]

    }

    return false;

    },5000)

    > 同样也可以用settiomout实现,有兴趣的可以学习下;

    下面附带的有链接:

    [settimeout使用](http://www.w3school.com.cn/js/js_timing.asp)

    展开全文
  • 如何只用css实现点击按钮切换图片

    千次阅读 2021-06-12 07:53:49
    在css中,可以使用“:target”选择器,配合display属性来实现点击按钮切换图片,只需要给元素设置“元素:target{display:block;}”语句即可。“:target”选择器可用于选取当前活动的目标元素。本教程操作环境:...

    在css中,可以使用“:target”选择器,配合display属性来实现点击按钮切换图片,只需要给元素设置“元素:target{display:block;}”语句即可。“:target”选择器可用于选取当前活动的目标元素。

    7e4b1fdc7071fceba371dfd59479d7e7.png

    本教程操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑。

    今天使用CSS中的:target选择器来实现点击按钮切换相对应的图片的demo,此demo也可以使用JS来实现。

    demo的结构:img1

    img2

    img3

    img4

    p001.jpg

    p002.jpg

    p003.jpg

    p004.jpg

    demo的CSS样式:

    a{

    padding:5px 10px;

    border:1px solid #000;

    color:#fff;

    background-color:#888;

    text-decoration:none;

    }

    p{

    width:400px;

    height:400px;

    border:2px solid #ccc;

    margin-top:20px;

    position:absolute;

    top:20px;

    left:10px;

    display:none;

    padding:20px;

    }

    p:target{

    display:block;

    }

    运行的效果:

    25be485e05ba9c4b339efbfcdeeadcc1.png

    相关学习推荐:css教程

    展开全文
  • vue项目中鼠标悬浮图片实现hover效果切换图片-案例

    千次阅读 热门讨论 2021-05-25 18:01:13
    1、使用css实现鼠标滑动切换图片效果 <ul class="ullist"> <li class="img1"> <img src="../assets/image/icon/ic1.png" alt="" /> </li> <li class="img2"> <img src="../...

    1、使用css实现鼠标滑动切换图片效果

    <ul class="ullist">
      <li class="img1">
    	<img src="../assets/image/icon/ic1.png" alt="" />
      </li>
      <li class="img2">
    	<img src="../assets/image/icon/ic2.png" alt="" />
      </li>
      <li class="img3">
    	<img src="../assets/image/icon/ic3.png" alt="" />
      </li>
    </ul>
    
    // less
    .ullist {
        display: flex;
      .img1:hover img {
        content: url(../assets/image/icon/ic1-1.png);
      }
      .img2:hover img {
        content: url(../assets/image/icon/ic2-1.png);
      }
      .img3:hover img {
        content: url(../assets/image/icon/ic3-1.png);
      }
    }

    2、使用鼠标事件实现切换效果

    <template>
      <div class="hv">
        <p>图片hover效果展示</p>
        <ul class="ullist2">
            <li v-for="(item,index) of imgList" :key="index" @mouseover="changeIndex(index)" @mouseout="changeIndexBack(index)">
                <img :src="item.tp" alt="" v-show="!item.show"/>
                <img :src="item.tp1" alt="" v-show="item.show"/>
                <div class="tips" v-show="item.show">
                  <!-- <router-link :to="item.url">你好厉害</router-link> -->
                  <a :href="item.url" target="_blank">你好厉害</a>
                </div>
            </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          imgList: [
              {
                  tp:require('../assets/image/icon/ic1.png'),
                  tp1:require('../assets/image/icon/ic1-1.png'),
                  url:'https://www.baidu.com/',
                  show:false,
              },
              {
                  tp:require('../assets/image/icon/ic2.png'),
                  tp1:require('../assets/image/icon/ic2-1.png'),
                  url:'https://www.baidu.com/',
                  show:false,
              },
              {
                  tp:require('../assets/image/icon/ic3.png'),
                  tp1:require('../assets/image/icon/ic3-1.png'), 
                  url:'https://www.baidu.com/',
                  show:false,
              }
          ],
        };
      },
      mounted() {},
      methods: {
          changeIndex(e){
              console.log(e,"移入");
              this.imgList[e].show = !this.imgList[e].show
          },
          changeIndexBack(e){
              console.log(e,"移除");
              this.imgList[e].show = !this.imgList[e].show
          },
      },
    };
    </script>
    
    <style lang="less" scoped>
    .ullist2{
        display: flex;
        .tips{
          padding: 20px 10px;
          background-color: aqua;
        }
    }
    </style>

    全部代码

    <template>
      <div class="hv">
        <p>图片hover效果展示</p>
        <ul class="ullist">
          <li class="img1">
            <img src="../assets/image/icon/ic1.png" alt="" />
          </li>
          <li class="img2">
            <img src="../assets/image/icon/ic2.png" alt="" />
          </li>
          <li class="img3">
            <img src="../assets/image/icon/ic3.png" alt="" />
          </li>
        </ul>
        <hr>
        <ul class="ullist2">
            <li v-for="(item,index) of imgList" :key="index" @mouseover="changeIndex(index)" @mouseout="changeIndexBack(index)">
                <img :src="item.tp" alt="" v-show="!item.show"/>
                <img :src="item.tp1" alt="" v-show="item.show"/>
                <div class="tips" v-show="item.show">
                  <!-- <router-link :to="item.url">你好厉害</router-link> -->
                  <a :href="item.url" target="_blank">你好厉害</a>
                </div>
            </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          imgList: [
              {
                  tp:require('../assets/image/icon/ic1.png'),
                  tp1:require('../assets/image/icon/ic1-1.png'),
                  url:'https://www.baidu.com/',
                  show:false,
              },
              {
                  tp:require('../assets/image/icon/ic2.png'),
                  tp1:require('../assets/image/icon/ic2-1.png'),
                  url:'https://www.baidu.com/',
                  show:false,
              },
              {
                  tp:require('../assets/image/icon/ic3.png'),
                  tp1:require('../assets/image/icon/ic3-1.png'), 
                  url:'https://www.baidu.com/',
                  show:false,
              }
          ],
        };
      },
      mounted() {},
      methods: {
          changeIndex(e){
              console.log(e,"移入");
              this.imgList[e].show = !this.imgList[e].show
          },
          changeIndexBack(e){
              console.log(e,"移除");
              this.imgList[e].show = !this.imgList[e].show
          },
      },
    };
    </script>
    
    <style lang="less" scoped>
    .ullist2{
        display: flex;
        .tips{
          padding: 20px 10px;
          background-color: aqua;
        }
    }
    .ullist {
        display: flex;
      .img1:hover img {
        content: url(../assets/image/icon/ic1-1.png);
      }
      .img2:hover img {
        content: url(../assets/image/icon/ic2-1.png);
      }
      .img3:hover img {
        content: url(../assets/image/icon/ic3-1.png);
      }
    }
    </style>

     

    展开全文
  • var pic = ['image/imgChange/1.jpg','image/imgChange/2.jpg','image/imgChange/3.jpg','image/imgChange/4.jpg'];var currentPic=0;window.onload = function () {//初始化上一张按钮禁用document.getElementById...
  • 本文实例讲述了js动态切换图片的方法。分享给大家供大家参考。具体实现方法如下:index.css文件如下:* {margin: 0px;padding: 0px;}body {width: 632px;/*background-color: blue;*/margin: 0 auto;}#imgsCom {...
  • 匿名用户1级2017-12-01 回答html点击按钮时切换图片的代码如下:#hello{width:108px;height:108px;border:1pxsolid#369;overflow:hidden;margin:auto;}#word{margin:auto;width:136px;}functiona(){$('#hello').find...
  • 本文采用ImageSwitcher实现左右滑动切换图片。首先调用setFactory方法,设置视图工厂;然后设置手指触碰监听,判断左滑右滑进而切换图片。 本地图片 xml <?xml version="1.0" encoding="utf-8"?> <...
  • 本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应图片...
  • JS实现单击切换图片

    2021-02-06 09:52:09
    JS实现单击切换图片 前言 讲明一点,这是小编参照书上的代码写的,希望读者不要随意转载。 参考代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
  • 使用JavaScript实现点击‘上一张’,‘下一张’循环播放图片,并在头部标识出‘共6张图片,当前第 * 张’,练习代码展示: 接下来先是效果图: 接下来是代码 <!DOCTYPE html> <html lang="en"> &...
  • vue实现按钮切换图片

    千次阅读 2021-03-07 07:17:37
    本文实例为大家分享了vue实现按钮切换图片的具体代码,供大家参考,具体内容如下Tab选项卡实现步骤1、实现静态UI效果用传统的方式实现标签结构和样式2、基于数据重构UI效果将静态的结构和样式重构为基于Vue模板语法...
  • 利用js实现点击按钮切换图片的功能,并且能够记录当前所展示的图片的位置,通过这个练习来巩固一下对DOM中的节点查询和事件绑定的知识。 提示:以下是本篇文章正文内容,下面案例可供参考 一、DOM是什么? DOM全称:...
  • Vue鼠标悬浮切换图片

    2021-05-24 16:36:17
    } }, }) 效果展示 笔记 使用鼠标移动事件@mouseover实现鼠标悬浮切换的效果 区别mouseover和mouseenter 我查了下:转载自简书的一个博主作者:前端王睿----原文 在原生JS中鼠标移入移出事件有四个,...
  • 粤嵌gec6818开发板自动切换图片 #include #include #include #include #include #include #include void show_bmp(char path) { char bmp_buf[8004803]; int lcd_buf[800480]; bzero(bmp_buf,sizeof(bmp_buf)); ...
  • //将点击获取的图片信息赋值给第一张图片---达到切换的效果 } } </script> </body> </html> 三最终效果 最后 安利个网站------学习JavaScript可以看看-------https://zh.javascript.info/-----现代JavaScript
  • 实现点击按钮切换图片的效果 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta...
  • android 点击按钮来回切换图片

    千次阅读 2021-02-20 10:19:11
    android 点击切换图片 适合初学者,没什么好说的,很简单,不过方法我觉得挺精妙的。 1、添加图片 气死我了,选下面那个会报错 activity_main xml background是设置背景图片。 2、设置点击事件和创建Button...
  • 文章目录定时器、延时器简介点击按钮实现图片自动切换动画效果的实现轮播图 定时器、延时器简介 主要介绍如何构建一个定时器 定时器:见名知意,根据设定的时间不断的回调函数(单位为毫秒 3000 = 3s.
  • Android:使用ViewPager实现左右滑动切换图片(简单版)public class MainActivity extends Activity {private ViewPager viewPager;private ArrayList pageview;@Overrideprotected void onCreate(Bundle ...
  • js 左右滑动切换图片

    2020-12-25 15:59:50
    $('.slider').on('touchend', function (e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } ...
  • 代码如下:window.onload = function(){var btn01 = document.getElementById("btn01");//获取img对象var img1 = ...//创建一个数组存储图片的路径var imgArr = ["img/1.png","img/2.png","img/3.png","img/4...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #muse{ width: 800px;... border: solid.
  • 我有这个代码===varswf_width=1100varswf_height=437varconfig='5|0x5c5c5c|0x595959|0|0xffffff|0xc0c0c0|0x000000'//config设置分别为:自动播放时间(秒)|文字颜色|文字背景色|文字背景透明度|按键数字色|当前按键...
  • 点击缩略图显示的大图需要借助插件的一个属性::defaultIndeximage.png从你点击图片开始,左右滑动Html代码://此处是大图预览的盒子 ,切换图片也在此处实现功能 css部分代码:image.png/*移动端商品详情页的小图...
  • 这是里面的两个按钮 <div class="text-btnBox"> <el-button type="primary" @click="changeone()">信息采集</el-button> ...el-button type="primary" @click="change()">...默认图片 <!--
  • JavaScript实现点击按钮切换图片

    千次阅读 2020-12-28 22:39:28
    完成图片切换功能 <style> .div{ width: 800px; height: 600px; } .btn{ width: 120px; height: 60px; align-content: center; } .divcss5{margin:0 auto} <...
  • 本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧!软件名称:Adobe Dreamweaver CS3 官方中文安装版软件大小:76.2MB更新时间:2015-05-18...
  • 1.先看看效果 鼠标不移入的效果 鼠标移入的效果 点击下方的图片可以切换要放大的图片
  • /*对应下面部分的5张图片区域的效果,Node链表的效果——太精妙了,我刚开始还以为要很死板用画格子的方式实现*/ newImage.onclick = function(e) { /*先初始化,没有鼠标点击的时候,displayedImage不会改变;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 362,347
精华内容 144,938
关键字:

切换图片