精华内容
下载资源
问答
  • HTML图片自动切换

    2013-03-04 15:09:33
    自己写的图片自动切换。一种常见的网页效果。
  • js图片之间切换html图片自动切换 js2图片 切换 图片 html图片 自动切换
  • 1、将下面的代码插入到HTML的之间:sandra0 = new Image();sandra0.src = "image1.gif";sandra1 = new Image();sandra1.src = "image2.gif";sandra2 = new Image();sandra2.src = "image3.gif";var i_strngth=1var i...

    1、将下面的代码插入到HTML的

    之间:

    sandra0 = new Image();

    sandra0.src = "image1.gif";

    sandra1 = new Image();

    sandra1.src = "image2.gif";

    sandra2 = new Image();

    sandra2.src = "image3.gif";

    var i_strngth=1

    var i_image=0

    var imageurl = new Array()

    imageurl[0] ="图片名称1.gif"

    imageurl[1] ="图片名称2.gif"

    imageurl[2] ="图片名称3.gif"

    function showimage() {

    if(document.all) {

    if (i_strngth <=110) {

    testimage.innerHTML="+imageurl%5Bi_image%5D+";

    i_strngth=i_strngth+10

    var timer=setTimeout("showimage()",100)

    }

    else {

    clearTimeout(timer)

    var timer=setTimeout("hideimage()",1000)

    }

    }

    if(document.layers) {

    clearTimeout(timer)

    document.testimage.document.write("+imageurl%5Bi_image%5D+")

    document.close()

    i_image++

    if (i_image >= imageurl.length) {i_image=0}

    var timer=setTimeout("showimage()",2000)

    }

    }

    function hideimage() {

    if (i_strngth >=-10) {

    testimage.innerHTML="+imageurl%5Bi_image%5D+";

    i_strngth=i_strngth-10

    var timer=setTimeout("hideimage()",100)

    }

    else {

    clearTimeout(timer)

    i_image++

    if (i_image >= imageurl.length) {i_image=0}

    i_strngth=1

    var timer=setTimeout("showimage()",500)

    }

    }

    2、修改

    语句为:

    3、将下面的代码加入到HTML的

    之间:top和left设定显示的位置

    [此贴子已经被作者于2006-10-26 10:36:20编辑过]

    展开全文
  • } 您可能感兴趣的文章:最简单的js图片切换效果实现代码 用html+css+js实现的一个简单的图片切换特效 一段非常简单的让图片自动切换js代码 js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码 纯js实现...

    复制代码 代码如下:

    var curIndex=0;

    //时间间隔 单位毫秒

    var timeInterval=1000;

    var arr=new Array();

    arr[0]="1.jpg";

    arr[1]="2.jpg";

    arr[2]="3.jpg";

    arr[3]="4.jpg";

    arr[4]="5.jpg";

    arr[5]="6.jpg";

    arr[6]="7.jpg";

    setInterval(changeImg,timeInterval);

    function changeImg()

    {

    var obj=document.getElementById("obj");

    if (curIndex==arr.length-1)

    {

    curIndex=0;

    }

    else

    {

    curIndex+=1;

    }

    obj.src=arr[curIndex];

    }

    1.jpg

    可以自己配置,自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对、相对路径都可以)

    虽然很简单,但是很实用。

    复制代码 代码如下:

    图片自动跳转

    setInterval(test,1000);

    var array=new Array();

    var index=0;

    var array= new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg");

    function test()

    { var myimg=document.getElementById("imgs");

    if(index==array.length-1)

    { index=0; }else{ index++; }

    myimg.src=array[index];

    }

    1.jpg

    您可能感兴趣的文章:最简单的js图片切换效果实现代码

    用html+css+js实现的一个简单的图片切换特效

    一段非常简单的让图片自动切换js代码

    js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    纯js实现背景图片切换效果代码

    js实现支持手机滑动切换的轮播图片效果实例

    简单的实现点击箭头图片切换的js代码

    css图片切换效果代码[不用js]

    JS鼠标滑过图片时切换图片实现思路

    JavaScript实现切换多张图片

    展开全文
  • html实现图片自动切换

    千次阅读 2020-06-14 18:55:51
    <!DOCTYPE html> <meta ...图片轮换</title> </head> <body> <img src="1.jpg" id="image" width="234" height="301" > </body> <script>
    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    <title>图片轮换</title>
      
    </head>
    <body>
        <img src="1.jpg" id="image" width="234" height="301" >
    </body>
    <script>
                var arr=new Array()
                arr[0]="1.jpg";
                arr[1]="2.jpg";
                arr[2]="3.jpg";
                var i=0;
                function image()
                {
                    var image=document.getElementById("image");
                    image.src=arr[i];
                    i++;
                    if(i>2){i=0};             
                };
                setInterval(function(){
                image();
                },500);
            </script>
    </html>
    
    展开全文
  • HTML+CSS+JS做出图片自动切换效果

    万次阅读 多人点赞 2018-11-28 00:27:28
    HTML+CSS+JS,图片自动切换、鼠标移动触发切换效果(onmouseover获得当前元素id方法) 大学新手一枚,乱七八糟学了好多又忘了好多,以后要慢慢一点点记下来。 ====================================================...

    HTML+CSS+JS,图片自动切换、鼠标移动触发切换效果(onmouseover获得当前元素id方法)

    大学新手一枚,乱七八糟学了好多又忘了好多,以后要慢慢一点点记下来。

    ================================================================

    效果图

    在这里插入图片描述
    在这里插入图片描述

    文件结构:

    素材里面都是所需的图片
    素材文件夹里面都是所需的图片
    鼠标触碰切换按钮图片,长宽都P成20px(我知道很丑,是随便找的图啦。。):在这里插入图片描述 在这里插入图片描述

    切换的图片我是设置了五张,长宽都一样,不放上来了。

    index.html:
    <div class="center_photo">
    	<!-- 要切换的图片 -->
    	<img alt="tupian" src="../素材/photo01.jpg" style="height:100%; width:100%" id="img"/>
        <div class="point" style="display:block;">
            <ul>
            <!-- ul、li实现“小圆点” -->
                <li id="p1" onmouseover="point(this)" onmouseout="leave()" >
                    <img src="../素材/ok01.png" alt="" id="i1" />
                </li>
                <li id="p2" onmouseover="point(this)" onmouseout="leave()" >
                    <img src="../素材/ok02.png" alt="" id="i2" />
                </li>
                <li id="p3" onmouseover="point(this)" onmouseout="leave()" >
                    <img src="../素材/ok02.png" alt="" id="i3" />
                </li>
                <li id="p4" onmouseover="point(this)" onmouseout="leave()" >
                    <img src="../素材/ok02.png" alt="" id="i4" />
                </li>
                <li id="p5" onmouseover="point(this)" onmouseout="leave()" >
                    <img src="../素材/ok02.png" alt="" id="i5" />
                </li>
            </ul>
        </div>
    </div>
    
    css.css:
    <!-- 可以根据自己需要改变样式,我是全横屏的 -->
    .center_photo{
    	width:100%;
    	margin:0;
    	padding:0;
    	height::1600px;
    	background:#c8d5b9;
    	}
    .center_photo img{width:100%;height:100%;}
    .point{
    	height:50px;
    	position:relative;
    	top:-60px;
    	width:240px;
    	margin:0 auto;
    	left:0px;
    	z-index:999;
    	text-align:center;
    	}
    .point ul li{
    	width:20px;
    	height:20px;
    	margin:0 5px;
    	float:left;
    	list-style:none;
    	}
    .point ul li img{width:20px;height:20px;}
    .point ul li img:hover{cursor:pointer;}
    
    js.js:
    var min=1, max=5;
    //设置切换的图片
    var imgList = new Array();
    imgList[0]="../素材/photo01.jpg";
    imgList[1]="../素材/photo02.jpg";
    imgList[2]="../素材/photo03.jpg";
    imgList[3]="../素材/photo04.jpg";
    imgList[4]="../素材/photo05.jpg";
    //自动变化“小圆点”
    var li_imgList = new Array();
    li_imgList[0]="i1";
    li_imgList[1]="i2";
    li_imgList[2]="i3";
    li_imgList[3]="i4";
    li_imgList[4]="i5";
    //鼠标触碰修改(这里感觉重复了,懒得改了。。)
    var liList = new Array();
    liList[0]="p1";
    liList[1]="p2";
    liList[2]="p3";
    liList[3]="p4";
    liList[4]="p5";
    
    //自动循环
    var int=self.setInterval("loop()",2000);
    function loop(){
    	var str=document.getElementById("img").src;
    	for(var i=0; i<5; i++){
    		if(min==5){
    			min=0;
    		}
    		if(i==min){
    			document.getElementById("img").src=imgList[i];
    			min++;
    			if(i==0){
    				document.getElementById(li_imgList[i]).src="../素材/ok01.png";
    				document.getElementById(li_imgList[4]).src="../素材/ok02.png";
    			}else{
    				document.getElementById(li_imgList[i]).src="../素材/ok01.png";
    				document.getElementById(li_imgList[i-1]).src="../素材/ok02.png";
    			}
    			break;
    		}
    	}
    }
    //鼠标触碰显示图片+暂停循环显示
    var a=3;
    function point(obj){
    	clearInterval(int);
    	//alert(obj.id);
    	for(var i=0;i<5;i++){
    		if(obj.id==liList[i]){
    			document.getElementById("img").src=imgList[i];
    			min=i+1;
    			document.getElementById(li_imgList[i]).src="../素材/ok01.png";
    			for(var a=0;a<5;a++){
    				if(a!=i){
    					document.getElementById(li_imgList[a]).src="../素材/ok02.png";
    				}
    			}
    		}
    	}
    }
    //鼠标离开继续循环
    function leave(){
    	int = setInterval("loop()",2000);
    }
    

    这里记一下onmouseover情况下获得当前元素id的技巧。

    一般我们在元素中这样使用onmouseover
    = =》 οnmοuseοver=“function()”
    如果要获得当前元素的id,则改为
    = =》 οnmοuseοver=“function(this)”
    然后在js文件中,比如这样的

    function functionTest(obj){
    	obj.id;    //这个就是当前元素的id啦
    }
    

    综上三个文件结合起来,就搞定啦~

    撒花✿✿ヽ(°▽°)ノ✿

    展开全文
  • 满意答案lt15837151779推荐于 2018.02.28dl {position:absolute;width:240px;height:170px;border:10px solid #eee;}dd {margin:0;width:240px;height:170px;overflow:hidden;}img {border:1px solid black}dt {...
  • 知识储备 所用到的函数为windows对象自带的方法 创建定时器 window.setInterval(code,millisec,lang) //code 为要调用的函数或者要被执行的代码块 //millisec 周期性执行...案例----图片自动切换实现 首先实现手动.
  • html+css+js实现图片自动切换+手动切换

    千次阅读 多人点赞 2020-04-22 16:22:15
    点击相应按钮,切换相应图片,不点击切换时每隔2秒,自动切换下一张。 HTML部分: <body> <div> <div id="BJ"> <img src="images/1.jpg" id="img" /> </div> <ul id="o...
  • H5图片切换,js图片轮播,js图片自动切换
  • js实现图片自动切换

    千次阅读 2017-10-31 22:00:10
    说明:通过计时器使得图片每间隔几秒可以自动切换,也... html代码:<!DOCTYPE HTML> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 图片自动切换 <link rel="stylesheet" type="t
  • html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;style type="text/css"&gt; body{margin:50px auto;padding:0;border:0; background-color:#...
  • 图片自动切换

    2014-10-09 22:07:25
    今天面试,面试官说图片切换功能怎么做,简单的答了一下,因为没有wdt
  • 这篇文章关于如何设置网页自动切换背景图片如何设置背景图片通过点击按钮来触发“切换背景图片”这个命令==重点==如何在script里面改变网页的背景图片设置背景图片自动切换==周期性定时器====停止计时器== ...
  • 就像游民星空左上角的图片,一个框里有1,2,3,4,5的序号,会自动切换的,不仅仅是切换,而且还能选择哪种,可能这问题太白痴了..请见谅因为真的不懂
  • JQuery实现图片切换(自动切换+手动切换)

    万次阅读 热门讨论 2015-01-31 21:26:27
    JQuery实现图片切换(自动切换+手动切换)
  • 纯css实现图片自动切换

    千次阅读 2020-09-01 10:36:10
    纯css实现图片自动切换 **对于我这样的小菜鸟来说真的不喜欢写js 以前写图片切换都是用js 刚好cs3的出现解决了这个 头疼的问题 主要用到的是css3的过渡 实现图片自动切换并添加轮播焦点 先看图吧 因为这里小洪做的...
  • 图片自动切换实现原理:使用一个div并设置溢出隐藏来只显示一次一张图片,同时设置另一个div(总图片div),尺寸为所有图片横排的总尺寸宽高,作为动画顺序播放,然后使用css3动画,通过对div(总图片div)进行位移...
  • HTML中如何自动切换页面背景图片

    万次阅读 2017-08-25 16:54:55
    一、切换body图片   var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组共有3张图片放在img文件夹下 var timeInterval = 1000;  //定义一个存放照片位置的数组,可以放任意个,在这里放3个 var ...
  • html5 用canvas实现图片自动滑动切换

    千次阅读 2019-02-24 12:46:50
    html5 用canvas实现图片自动滑动切换
  • DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8script type=text/javascript src=jquery-3.2.1.js/scripttitle轮播特效/titlestyle.box1{width:200px;height:300px;border:1px dotted black;background: #aaa;...
  • 一、切换body图片 <script type="text/javascript"> var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组共有3张图片放在img文件夹下 var timeInterval = 1000; //定义一个存放照片位置的数组,...
  • jquery 图片自动切换

    千次阅读 2013-03-20 16:22:15
    JQUERY实现图片自动切换 body{margin:0px; padding:0px; font-family:Arial} ul{list-style:none;margin:0px;padding:0px} .click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:...
  • 图片切换图片自动切换(实例)

    千次阅读 2013-03-04 18:55:41
     //图片修改后,序号背景色也要发生变化  //先将所有的序号颜色恢复  for(var i=1;i;i++){  document.getElementById("num"+i).style.backgroundColor = '';  }  //将当前序号设置背景色  ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,751
精华内容 37,900
关键字:

html图片自动切换