精华内容
下载资源
问答
  • ../Scripts/jquery-1.4.1.js " type= " text/javascript " > " text/javascript " > var imgPaths = [ " http://img4.cache.netease.com/sports/2011/2/14/2011021405120433a90.jpg " , " ...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            .mouseOver
            {
                cursor: hand;
                border: 1px solid red;
            }
        </style>
        <title></title>
        <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            var imgPaths = ["http://img4.cache.netease.com/sports/2011/2/14/2011021405120433a90.jpg",
            "http://img3.cache.netease.com/sports/2011/2/14/2011021407333047e73.jpg"];
            $(function () {
                $("#showImg").attr("src", imgPaths[0]);
                var top;
                var left;
                var width;
                var height;
                top = $("#showImg").offset().top;
                left = $("#showImg").offset().left;
                width = $("#showImg").width();
                height = $("#showImg").height();
                $("#popDiv").css({ position: "absolute", top: top + height - $("#popDiv").height(), left: left + width - $("#popDiv").width(), padding: "1px" });
                $("#popDiv span").hover(function () {
                    $(this).addClass("mouseOver");
                },
                function () {
                    $(this).removeClass("mouseOver")
                }
                ).click(function () {
                    $("#showImg").attr("src", imgPaths[eval($(this).text()) - 1]);
                });
            });
        </script>
    </head>
    <body>
        <div>
            <img id="showImg" alt="" height="400" width="300" src="" />
        </div>
        <div id="popDiv" style="width: 300px; height: 20px; text-align: right">
            <span>1</span> <span>2</span>
        </div>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/kennyliu/p/3444093.html

    展开全文
  • JS带有数字图片切换特效是一款鼠标点击数字图片幻灯片变化特效
  • 最终实现效果图 点击下标切换到该图片上 代码块<!DOCTYPE html> <title></title> * { margin: 0; padding: 0 }

    最终实现效果图

    这里写图片描述

    • 点击下标切换到该图片上

    代码块

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
             <style>
            * {
                margin: 0;
                padding: 0
            }
    
            ul {
                list-style: none
            }
    
            img {
                vertical-align: top
            }
    
            .box {
                width: 490px;
                height: 170px;
                margin: 100px auto;
                padding: 5px;
                border: 1px solid #ccc;
            }
    
            .inner {
                width: 490px;
                height: 170px;
                background-color: pink;
                overflow: hidden;
                position: relative;
            }
    
            .inner ul {
                width: 1000%;
                position: absolute;
                top: 0;
                left: 0;
            }
    
            .inner li {
                float: left;
            }
    
            .square {
                position: absolute;
                right: 10px;
                bottom: 10px;
            }
    
            .square span {
                display: inline-block;
                width: 16px;
                height: 16px;
                background-color: #fff;
                text-align: center;
                line-height: 16px;
                cursor: pointer;
            }
    
            .square span.current {
                background-color: orangered;
                color: #fff;
            }
        </style>
        </head>
        <body>
            <div class="box" id="box">
                <div class="inner">
                    <ul>
                        <li><a href="#"><img src="images/01.jpg" /></a></li>
                        <li><a href="#"><img src="images/02.jpg" /></a></li>
                        <li><a href="#"><img src="images/03.jpg" /></a></li>
                        <li><a href="#"><img src="images/04.jpg" /></a></li>
                        <li><a href="#"><img src="images/05.jpg" /></a></li>
                    </ul>
                    <div class="square">
                        <span class="current">1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                    </div>
                </div>
            </div>
    
    
        <script type="text/javascript">
            //鼠标经过按钮 按钮排他
            var box = document.getElementById("box");
            var inner = box.children[0];            //获取box下的第一个元素,也就是inner
            var ul = inner.children[0];             //获取inner下的ul
            var squareList = inner.children[1];     //获取inner下的第二个元素
            var squares = squareList.children;      //获取所有的按钮
            var imgWidth = inner.offsetWidth;
    //      alert(imgWidth);
            //给每个按钮注册鼠标经过事件
            for(var i=0; i<squares.length; i++){
                squares[i].index = i;           //把索引保存在自定义属性中
                squares[i].onmouseover = function(){    //鼠标经过事件
                    //排他  干掉所有人 
                    for(var j=0; j<squares.length; j++){
                        squares[j].className = "";
                    }
                    //留下我自己
                    this.className = "current";
                    //以动画的方式把ul移动到指定的位置
                    //目标 和当前按钮索引有关,和图片宽度有关 而且是负数
                    var target = -this.index * imgWidth;    //获取到索引
                    animate(ul,target);
                }
            }
    
    
            function animate(obj, target) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var step = 20;
                    var step = obj.offsetLeft < target ? step : -step;
                    if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
                        obj.style.left = obj.offsetLeft + step + "px";
                    } else {
                        obj.style.left = target + "px";
                        clearInterval(obj.timer);
                    }
                }, 15)
            }
    
    
        </script>
    
    
    
        </body>
    </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

    展开全文
  • JS实现图片切换和数字随图片变换 1.添加6个圆形数字超链接,鼠标移动到数字区域,切换到数字对应的图片。 鼠标单击左右箭头时,切换图片的同时,图片对应的数字样式是也选中状态。
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;... list...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			ul{
    				list-style: none;
    			}
    			li{
    				display: none;
    			}
    			img{
    				vertical-align: top;
    			}
    			#wrap{
    				position: relative;
    				width: 380px;
    				margin: 20px auto;
    				border: 5px solid #005DB0;
    			}
    			#p{
    				position: absolute;
    				top: 0;
    				width: 100%;
    				text-align: center;
    				font-size: 20px;
    				line-height: 2;
    				color: #fff;
    				background: rgba(255,0,0,.4);
    			}
    			.menu{
    				position: absolute;
    				bottom: 5px;
    				width: 100%;
    				text-align: center;
    			}
    			.menu>span{
    				display: inline-block;
    				width: 20px;
    				height: 20px;
    				font-size: 15px;
    				line-height: 20px;
    				color: #fff;
    				background: #0000FF;
    				cursor: pointer;
    			}
    			.active{
    				background: red!important;
    			}
    		</style>
    		
    		<script type="text/javascript">
    			window.onload = function(){
    				var aDiv = document.getElementById('list');
    				var aImg = document.getElementById('img');
    				var aP = document.getElementById('p');
    				var aSp = document.querySelectorAll('.menu span');
    				// console.log(aUl,aLi,aP,aSp);
    				var arr = ['美女1','美女2','美女3',];
    				var arrImg = ['images/pic01.jpg','images/pic02.jpg','images/pic03.jpg',];
    				// console.log(arr);
    				for(var i = 0; i < aSp.length; i++){
    					aSp[i].index = i;
    					aSp[i].onclick = function(){
    						for(var i = 0; i < aSp.length; i++){
    							aSp[i].className = '';
    							// aImg.src = '';
    							// aP.innerHTML = '';
    						}
    						aSp[this.index].className = 'active';
    						aImg.src = arrImg[this.index];
    						aP.innerHTML = arr[this.index];
    					}
    				}
    				
    				
    				
    			}
    		</script>
    	</head>
    	<body>
    		<div id="wrap">
    			<div id="list">
    				<img id="img" src="images/pic01.jpg" >
    			</div>
    			<p id="p">美女1</p>
    			<div class="menu">
    				<span class="active">1</span>
    				<span>2</span>
    				<span>3</span>
    			</div>
    		</div>
    	</body>
    </html>
    

     

    展开全文
  • 完成图片切换功能 <style> .div{ width: 800px; height: 600px; } .btn{ width: 120px; height: 60px; align-content: center; } .divcss5{margin:0 auto} <...
  • 数字切换图片

    2017-04-26 14:16:00
    目的:通过数字键实现切换图片功能。 思路: 首先要有两个容器来放置图片(这里用数字来代替)和数字编码,并设置相应的Css样式,样式设置时需要注意ol的定位父级是div,同时div还应该设置超出部分隐藏, 数字键的...
  • js基础【点击按钮 切换图片

    千次阅读 2019-07-08 18:23:13
    // 把title1里面的数字同步切换 title1.innerHTML = (step+1) + '/4'; // 把title2里面的数字同步切换 title2.innerHTML = '美女' + (step+1); focusFllow(); } //点击顺序按钮,flag赋值为0 ...
  • ">切换图片 <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=...
  • 点击链接切换显示不同的图片javascript版纯Javascript 有注释。 非常方便后续的开发扩展使用。
  • //开启定时器,每隔2秒切换图片 timer = setInterval(function () { autoloop(); },1000); //当鼠标移入图片的时候停止动画 $("#box").hover(function () { clearInterval(timer); },function () { //当鼠标...
  • // 放在 <head></head> 对标签中使用 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  • // 首先两张图片,一张闭眼一张睁眼,放到项目里,图片路径放自己的路径 <template> <input :type='telphone' clearable/> <div @click.stop='smallEyes' class='_eyes'> <img src='~assets/...
  • JS切换图片

    2019-07-16 10:14:26
    今天在学习到JS特效切换图片时,遇到了很多问题: 首先我的思路是这样的: 设置监听事件,onclick 由于要实现循环切换,就意味着在临界值处要进行其他的处理和判断 非临界值时,进行正常的加减操作 然后我就开始...
  • <body> <img src="img/dm.jpeg" alt="" id="pic"><br> <input type="button" value="下一张" id="btn"> <p id="txt">显示的是img/1.jpg<...var ary = ['img/dm.j...
  • JS实现单击切换图片

    2021-02-06 09:52:09
    JS实现单击切换图片 前言 讲明一点,这是小编参照书上的代码写的,希望读者不要随意转载。 参考代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
  • js实现点击图片切换

    千次阅读 2018-05-12 16:11:46
    点击图片切换为另一个图片,再点击后又会变为原来的图片&lt;img src="images/del.png" id="img"&gt;&lt;script&gt;var image=document.getElementById('img');image.onclick=...
  • 原生JS实现切换图片demo 一个小小的学习页面,运用html、css、js基本知识,做一个切换图片的页面。
  • JS图片自动切换

    2013-02-16 21:49:28
    JS图片自动切换,4张图片点击数字就出现该属的那张图,不点击自动切换
  • 实现效果:点击文字,切换到对应的图片显示。 如:点击文字1,切换图片1,点击文字2,切换图片2,点击文字3,切换图片3。     实现思路: 1、制作一个div盒子,用来做展示图片的容器。因此盒子的宽高,...
  • js实现轮播图(点击小图片切换图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div class="switch fl" ...
  • 在这里我提供一段极简的js点击组图切换效果代码,包含一个html文件,一个css文件,一个js文件,一个jquery.js文件,以及一张图片。 index.html <html><head><title>js点击...
  • 数字索引按钮图片切换图是一款鼠标滑过数字索引按钮自动切换图片,支持自动轮播特效。
  • 自己写的js定时切换图片效果,点击也数也可以进行图片切换

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,622
精华内容 6,248
关键字:

js点击数字切换图片