html怎样实现图片自动切换

 我来答
幻翼高达Zero
2019-08-21 · TA获得超过1.7万个赞
知道答主
回答量:499
采纳率:0%
帮助的人:8万
展开全部

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的script标签中,填入js代码:setInterval('$("img").attr("src", "small3.png")', 1000);。

3、浏览器进入index.html页面中,此时显示出一张图片。

4、过1秒后,图片自动切换为另一张图片了。

黑马程序员
2016-12-06 · 改变中国IT教育,我们正在行动
黑马程序员
黑马程序员为大学毕业后,有理想、有梦想,想从事IT行业的年轻人改变自己的命运。黑马程序员成就IT黑马
向TA提问
展开全部

1 代码 (实现了图片轮播的效果)

<!doctype html>

<html>

     <head>

     <title>图片简单切换</title>

 <script>

         window.onload = function(){

        var  pre = document.querySelector("#pre");

    var  next = document.querySelector("#next");

     var  pic  = document.querySelector("#pic");

     var  index  = 1;

next.onclick = function(){

 index++;

               if(index > 5) {

     index = 1;

  }

 pic.src = "image/"+index+".jpg"; 

  

}

pre.onclick = function(){

 index--;

               if(index < 1) {

     index = 5;

  }

 pic.src = "image/"+index+".jpg"; 

  

}

}

 </script>

 

</head>

<body>

 <input type="button" value="上一张" id="pre"></input>

 <input type="button" value="下一张" id="next"></input> <br/>

 <img src="image/1.jpg" id="pic"/>

</body>

</html>

2 静态页面效果图

3 注意的是我的图片命名是有规则的  是按照数字来的  1 .jpg  2.JPG...

4  实现图片轮播显示代码解释 :

//当点击下一个按钮的时候,图片显示image2.jpg用的是index变量来累加,当index超过了图片的数量,就让index =1;回到第一张图片。

pre.onclick = function(){

 index--;

               if(index < 1) {

     index = 5;

  }

 pic.src = "image/"+index+".jpg"; 

  

}

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
育知同创教育
2017-04-14 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部

html实现图片自动切换是通过js代码来控制的。实现思路如下:

  1. 创建一个图片数组,将需要轮播的图片放在这个数组中

  2. 通过js定时器去随机获取数组中的某一张图片在html中的固定位置显示即可。

实现代码如下:

<html>
<head>
<title>切换图片</title>
<script type = "text/javascript">
function displayNextImage() {显示下一张
x = (x === images.length - 1) ? 0 : x + 1;如果是最后一张,那么切换到第一张
document.getElementById("img").src = images[x];把获取到的值给img标签,让他显示          }

function displayPreviousImage() {显示下一张
x = (x <= 0) ? images.length - 1 : x - 1;获取数组中的上一个值
document.getElementById("img").src = images[x];把获取到的值给img标签,让他显示
}

function startTimer() {定时器,dom加载后调用
setInterval(displayNextImage, 3000);每隔3秒调用一次显示图片的方法。
}

var images = [], x = -1;定义imges数组存放图片名
images[0] = "image1.jpg";初始化第一张图
images[1] = "image2.jpg";初始化第二张图

images[2] = "image3.jpg"; 初始化第三张图

</script>
</head>

<body onload = "startTimer()">当页面加载完毕,调用startTimer方法       <img id="img" src="startpicture.jpg"/>img标签设置图片显示位置
<button type="button" 按钮点击后开始轮换图片onclick="displayPreviousImage()">上一张</button>
<button type="button" onclick="displayNextImage()">下一张</button>
</body>
</html>

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式