精华内容
下载资源
问答
  • 今天主要给大家分享一段js和css代码组合实现鼠标点击按钮图片切换图片自动切换点击左右按钮图片切换三种效果,代码非常简单,需要的朋友一起来学习吧
  • 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...

    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('btnUp').disabled = true;

    //初始化显示第一张图片

    showPic(0);

    //点击按钮切换到上一张

    document.getElementById('btnUp').onclick = function () {

    currentPic--;

    if (currentPic <= 0) {

    //判断如果到达第一张图片就禁用当前按钮

    this.disabled=true;

    }

    if (document.getElementById('btnNext').disabled) {

    //检测下一张按钮是否被禁用,如果被禁用,就重新启用

    document.getElementById('btnNext').disabled = false;

    }

    showPic(currentPic);

    };

    //点击按钮切换到下一张

    document.getElementById('btnNext').onclick = function () {

    currentPic++;

    if (currentPic == pic.length - 1) {

    //判断如果到达最后一张图片就禁用当前按钮

    this.disabled = true;

    }

    if (document.getElementById('btnUp').disabled) {

    //检测上一张按钮是否被禁用,如果被禁用,就重新启用

    document.getElementById('btnUp').disabled = false;

    }

    showPic(currentPic);

    };

    }

    function showPic(_index) {

    if (_index < pic.length) {

    document.getElementById('img').src = pic[_index];

    }

    }

    1.jpg

    最后编辑:2018-04-20作者:shengruqing

    3e1952f9d438c50c64ef8dd2e4ed4ebb.png

    这个作者貌似有点懒,什么都没有留下。

    捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>... 1. 事件: 点击事件 onclick 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>
    
    
    展开全文
  • js 点击按钮切换图片

    2019-10-02 23:21:43
    iframe width="100%" height="300" src="https://jsfiddle.net/zxc886/e2rwv280/1/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe> ...
     
    
    
    <iframe width="100%" height="300" src="https://jsfiddle.net/zxc886/e2rwv280/1/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
    
    

     

     
    
    

       javascript 写的一个点击左右按钮切换图片  以及有图片张数 图片描述 下次做个优化 定时切换图片 

    转载于:https://www.cnblogs.com/2520IT/p/9025804.html

    展开全文
  • 原生js点击按钮切换图片

    千次阅读 2019-04-17 13:15:00
    <!DOCTYPE html><...<head> <meta charset="UTF-8"> <...动态切换图片</title></head><style>ul{ padding:0;margin:0;}li{ list-style: none;} #pic{ po...

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>动态切换图片</title>
    </head>
    <style>
    ul{
    padding:0;margin:0;
    }
    li{
    list-style: none;
    }

    #pic{
    position: relative;
    width: 400px;
    height: 400px;
    background-color:red;
    margin:100px auto;
    background:url('image/1.jpg') no-repeat center;

    }
    #pic img{
    width: 400px;
    height: 400px;
    }
    #pic ul{
    width: 50px;
    position: absolute;
    top: 0;
    right: -70px;

    }
    li{
    width: 40px;
    height: 40px;
    margin-bottom:10px;
    background-color: pink;
    float: left;
    }
    #pic span{

    position: absolute;
    bottom: 10px;
    left: 0;
    }
    #pic p,#pic span{
    width: 400px;
    height: 20px;
    }
    #pic p{
    position: absolute;
    top: 10px;
    left: 0;
    }
    .active{
    background-color: red;
    }

    </style>

    <body>
    <div id="pic">
    <img src="" alt="">
    <p>qwrwe</p>
    <span>werwer</span>
    <ul>
    </ul>
    </div>

    <script>
    window.οnlοad=function(){
    //存放旧li
    var oldLi=null;
    var num=0;
    var oPic = document.getElementById('pic');
    var oImg = oPic.getElementsByTagName('img')[0];
    var oUL = oPic.getElementsByTagName('ul')[0];
    var oSpan= oPic.getElementsByTagName('span')[0];
    var oP = oPic.getElementsByTagName('p')[0];
    var oLi= oUL.getElementsByTagName('li');
    var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];
    var aText = ['图片1','图片2','图片3','图片4'];


    for(var i=0;i<arr.length;i++){
    //动态添加元素
    oUL.innerHTML+='<li></li>';
    }
    // 旧li就等于当前的
    oldLi=oLi[num];


    // 初始化
    oImg.src=arr[num];
    oP.innerHTML=num+1+'/'+arr.length;
    oSpan.innerHTML=aText[num];
    oLi[num].className='active';

    for(var i=0;i<arr.length;i++){
    // 给元素自定义属性
    //
    oLi[i].index=i;
    oLi[i].οnclick=function(){
    // 当元素被点击时图片文字信息都一起变化
    oImg.src=arr[this.index];
    oP.innerHTML=1+this.index+'/'+arr.length;
    oSpan.innerHTML=aText[this.index];
    // 清空上一个 当前添加
    oldLi.className='';
    //将上一个给当前
    oldLi=this;
    this.className='active';
    }
    }
    }
    </script>
    </body>
    </html>

     

    实现效果

    转载于:https://www.cnblogs.com/zhizi99/p/10722881.html

    展开全文
  • 今天来分享一下鼠标点击按钮图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码。最后的效果如下:Html代码部分:图片轮播效果制作_赵一鸣随笔博客Css代码部分:*{margin:0px;padding:0px}...
  • javascript实现点击按钮切换图片

    千次阅读 2021-01-03 21:32:07
    效果图: 首先搭建基本的结构 ...--默认显示第一张图片--> <img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;"> <button id="pre">上一张</button> <butto
  • js实现点击按钮切换图片功能

    千次阅读 2020-06-11 10:26:52
    点击按钮切换图片 以下是完整代码,直接就可以运行哦~ CSS代码: <style> * { margin: 0; padding: 0; } #box { width: 500px; height: 500px; position: fixed; left: 400px; to
  • 完成图片切换功能 <style> .div{ width: 800px; height: 600px; } .btn{ width: 120px; height: 60px; align-content: center; } .divcss5{margin:0 auto} <...
  • js按钮图片显示,点击按钮切换图片

    千次阅读 2018-06-22 16:09:46
    点击按钮切换图片 $scope.show_all_shedules = function( $event , row_no){      var t = $scope.current_clicked_btn[row_no];  var picts = $event.srcElement || $event.target;  if (!$scope.current_...
  • 原生JS实现点击按钮切换图片

    千次阅读 2019-04-18 09:49:57
    动态切换图片 } li{ width: 40px; height: 40px; margin-bottom:10px; background-color: pink; float: left; } #pic span{ position: absolute; bottom: 10px; left: 0; } #pic p,#pic span{ width: 400px; hei....
  • JS实现点击button按钮切换图片

    万次阅读 多人点赞 2018-08-10 12:07:14
    JS实现点击button按钮切换图片 放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础。实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做的,算是对JS的一个入门案列。 最初的...
  • //设置第一张图片的索引值为0 var len = imgs.length;//获取存储图片数组的长度 $( '.btn' ).on( 'click' , function () { if ($(this).data( 'control' ) === "last" ) { index = Math.max(0, --index);/...
  • js点击按钮切换图片

    千次阅读 2013-04-15 22:00:50
    http://www.w3.org/1999/xhtml">          // 换图片简单方法 // function updatepic(radio) { // document.getElementById('pic1').setAttribute('src', 'image/' +
  • 实现点击按钮切换图片的效果 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta...
  • 目前已经实现点击对应的按钮弹出警示框,想把“弹出警示框”改成“用新的图片替换网页中原有图片”,应该写怎样的JavaScript 代码?求大佬指教!
  • 下面小编就为大家带来一篇利用JS实现点击按钮图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • js基础【点击按钮 切换图片

    千次阅读 2019-07-08 18:23:13
    //点击顺序按钮,flag赋值为0 btn1.onclick = function(){ flag = 0; } //点击循环按钮,flag赋值为1 btn2.onclick = function(){ flag = 1; }   // 焦点跟随 function focusFllow(){...
  • } style> <script type="text/javascript"> window.onload = function(){ /* * 点击按钮切换图片 */ //获取两个按钮 var prev = document.getElementById("prev"); var next = document.getElementById("next"); /*...
  • 点击按钮切换图片

    千次阅读 2018-04-16 20:22:31
    点击按钮切换图片:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script ...
  • ">切换图片 <script type="text/javascript"> var i = 1; function changePic(){ var imgst = document.getElementsByTagName("img")[0]; if(i == 1){ imgst.src = "timg.jpg"; i = 2; }else{ ...
  • js按钮实现切换图片效果

    千次阅读 2019-11-01 23:02:41
    通过JavaScript设置按钮功能实现点击按钮切换上一张、下一张图片。(具体实现代码在图片后面)。 浏览器实现效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,706
精华内容 16,682
关键字:

js点击按钮切换图片4张