javascript图片播放

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.4k 收藏
点赞数
分类专栏： javascript 文章标签： javascript image url border function xhtml

<!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>
    <title>无标题页</title>
</head>
<body>
   <div style="width:287px; height:248px; border:solid 1px #cecece;background:#F3F3F3; padding:6px; "> 
   <SCRIPT language="javascript" type="text/javascript">    
   var widths=287;   // 宽               
   var heights=242;   // 高               
   var counts=4; 　　　//显示的数量 
   img1=new Image ();img1.src='images/index/3.jpg';//图片地址 
   img2=new Image ();img2.src='images/index/4.jpg'; 
   img3=new Image ();img3.src='images/index/2.jpg'; 
   img4=new Image ();img4.src='images/index/1.jpg'; 
   url1=new Image ();url1.src='http://URL?action-viewnews-itemid-2439';//图片链接的URL 
   url2=new Image ();url2.src='http://URL/?action-viewnews-itemid-2386-page-1'; 
   url3=new Image ();url3.src='http://URL/?action-viewnews-itemid-2384-page-4'; 
   url4=new Image ();url4.src='http://URL/?action-viewnews-itemid-2377-page-2'; 
   var nn=1;    
   var key=0;    
   function change_img()    
   {if(key==0){key=1;}    
   else if(document.all)    
   {document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}    
  eval('document.getElementById("pic").src=img'+nn+'.src');    
  eval('document.getElementById("url").href=url'+nn+'.src');    
  for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}    
  document.getElementById("xxjdjj"+nn).className='bxx';    
  nn++;if(nn>counts){nn=1;}    
  tt=setTimeout('change_img()',6000);}    
  function changeimg(n){nn=n;window.clearInterval(tt);change_img();}    
  document.write('<style>');    
  document.write('.axx{padding:1px 7px;border-left:#ffffff 1px solid;font-weight: bold;}');    
  document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');    
  document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;font-weight: bold;}');    
  document.write('.bxx{padding:1px 7px;border-left:#ffffff 1px solid;font-weight: bold;}');    
  document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;background-color:#ff0000;font-weight: bold;}');    
   document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:14px;font:11px sans-serif;background-color:#ff0000;font-weight: bold;}');    
   document.write('</style>');    
   document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');    
   document.write('<div><a id="url" target="_blank"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');    
   document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #000000;width:100%-2px;text-align:right;top:-14px;position:relative;margin:1px;height:20px;padding:0px;margin:0px;border:0px;">'); 
   for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}    
   document.write('</div></div>');    
   change_img();    
   </SCRIPT> 
   </div> 
</body>
</html>

kingisking1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
织梦中js利用document.write输出图片轮播代码：
weixin_34242819的博客
07-04 465
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript表单校验
mqingo的博客
11-11 912
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
js实现图片连续滚动播放
qq_40261601的博客
02-18 3237
图片连续滚动播放效果
javascript实现图片播放功能
beauty9235的专栏
03-23 726
//javascript实现图片播放功能style type="text/css"> #imgp...{ float:left; margin:3px; width:405px; height:220px; text-align:center;}#imgp img...{ border:10px solid #b4be99;}style>table>tr>td>div id="imgp" >d
JavaScript实现图片轮播图
09-09 181
<!DOCTYPE html><html> <head> <script > var time; function init(){ //设置定时操作 time=setInterval("show()",0); //3秒执行一次 setInterval("show1()",1000); } var nu...
bofang.rar_javascript_播放图片
09-24
javascript的播放图片的效果，很好的
图片自动播放JAVASCRIPT
04-09
JAVASCRIPT 新闻图片自动播放猿代码
javascript 控制图片播放代码
12-01
无标题文档 .photo {width:896px;height:280px;border-top:0;border-right:2px solid #9f9fa1;border-bottom:1px solid #9f9fa1;border-left:2px solid #9f9fa1;font-size:12px} .photo .left {width:310px;...
HTML+Javascript实现点击图片自动播放背景音乐
12-27
用HTML+Javascript实现点击图片自动播放背景音乐。精巧实用，值得参考！
javascript控制图片播放的实现代码
12-04
一般实现用鼠标控制图片的滚动效果都比较麻烦，大段大段的代码让新手头疼无从下手，下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了，兼容ie、firefox和google浏览器。 分享代码如下： <!...
javascript自动播放网页图片
03-25
有助于初学javascript的学者，写的有点差，望借鉴!
javascript实现图片幻灯播放
10-16
利用javascript脚本语言实现图片的幻灯播放
利用HTML和JavaScript实现图片的自动播放
12-17
使用HTML和JavaScript对图片的全屏自动播放
javascript图片连续播放效果
05-21
javascript,图片连续播放，javascript，图片自动循环播放
播放器图片html,来看下图片播放器（JavaScript）
weixin_39709194的博客
06-08 237
Jq切换/**********总体布局**************/*{margin:0; padding:0; border:0;}body{background-color:rgba(0,0,0,0.4);}#content{position:relative; width:970px; height:550px; margin:20px auto; border:2px solid #FFF...
《JavaScript实现页面图片滚动播放》
dis86的博客
10-29 4987
HTML代码如下; &lt;div id="div_2"&gt; &lt;img id="img1" src="img/img1.jpg" onmouseout="dongtupian()" onmouseover="stoptupian()"&gt; &lt;ul id="ul1"&gt; &lt;li id
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 416
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1009
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 521
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
javascript图片轮播
09-09
### 回答1： 下面是一个简单的 JavaScript 图片轮播示例： HTML 代码： ```html <div class="slideshow-container"> <div class="mySlides fade"> <img src="1.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="2.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="3.jpg" style="width:100%"> </div> </div> <!-- 下面是轮播图的点点 --> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> ``` CSS 代码： ```css /* 隐藏所有的轮播图 */ .mySlides { display: none; } /* 轮播图容器 */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* 图片的样式 */ .mySlides img { vertical-align: middle; } /* 点点的样式 */ .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } /* 当点点被选中时的样式 */ .active { background-color: #717171; } ``` JavaScript 代码： ```javascript // 获取所有的轮播图和点点 var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); // 设置初始值 var slideIndex = 1; showSlides(slideIndex); // 下一张/上一张按钮的点击事件 function plusSlides(n) { showSlides((slideIndex += n)); } // 点点的点击事件 function currentSlide(n) { showSlides((slideIndex = n)); } // 轮播图的显示函数 function showSlides(n) { // 如果 n 大于轮播图的数量，则回到第一张 if (n > slides.length) { slideIndex = 1; } // 如果 n 小于 1，则跳到最后一张 if (n < 1) { slideIndex = slides.length; } // 隐藏所有的轮播图 for (var i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } // 取消所有点点的 active 样式 for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } // 显示当前轮播图和点点 slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } // 每 3 秒钟自动切换一张图片 setInterval(function () { plusSlides(1); }, 3000); ``` 这个示例中，我们使用 JavaScript 来控制轮播图的显示。通过设置 `slideIndex` 变量的值来切换轮播图，然后更新轮播图和点点的显示状态。我们也添加了一个定时器来自动切换轮播图。如果你想要更加复杂的轮播图效果，可以使用一些第三方的 JavaScript 库，例如 Swiper 和 Slick。 ### 回答2： JavaScript图片轮播是一种常见的网页功能，可以通过编写JavaScript代码来实现。下面我将使用300字中文回答如何制作一个简单的JavaScript图片轮播。 首先，我们需要HTML网页来放置轮播图。创建一个带有`<div>`标签的容器元素，并设置其样式使其具有固定的高度和宽度。在该容器内，创建一个带有`<img>`标签的图片元素，用于显示图片。 接下来，在JavaScript代码中，我们需要定义一个数组来存放所有要轮播的图片的URL。可以使用`var`关键字创建一个数组变量，并在其中添加所有图片的URL地址。 然后，定义一个变量`currentIndex`来保存当前显示的图片的索引。初始化时，可以将其设置为0，表示显示第一张图片。 接下来，我们需要编写一个函数来实现图片的轮播效果。可以给容器元素添加一个事件监听器，当触发轮播事件时，调用该函数。在函数中，首先获取到图片容器和图片数组。然后，通过改变图片的`src`属性，将当前显示的图片更换为下一张图片。同时，更新`currentIndex`以指示下一张要显示的图片。 最后，为了实现连续轮播效果，可以使用`setTimeout`函数来设置一个时间间隔，在每次轮播后，等待一段时间再进行下一次轮播。 完整的JavaScript图片轮播代码如下所示： ```html <div id="slideshow"> <img id="image" src=""> </div> <script> var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片URL数组 var currentIndex = 0; // 当前显示图片的索引 function slideShow() { // 图片轮播函数 var image = document.getElementById('image'); image.src = images[currentIndex]; currentIndex = (currentIndex + 1) % images.length; setTimeout(slideShow, 2000); // 设置时间间隔，单位为毫秒 } slideShow(); // 调用图片轮播函数 </script> ``` 上述代码实现了一个简单的JavaScript图片轮播功能。每2秒钟，页面中的图片将自动切换为下一张图片。你可以根据自己的需求修改代码中的图片URL和时间间隔等设置。 ### 回答3： JavaScript图片轮播是一种通过JavaScript代码实现的图片轮播效果。它可以在网页上呈现出多张图片，并以一定的时间间隔自动切换图片，以展示多个图片内容。 使用JavaScript实现图片轮播的基本步骤如下： 1. 首先，我们需要在HTML中创建一个容器元素，用于包裹图片元素，并设置合适的宽高以适应图片大小。 2. 然后，在JavaScript代码中，我们需要获取到容器元素和图片元素，可以通过元素的id或者class进行获取。 3. 接下来，我们可以定义一个变量，用来记录当前显示的图片序号。 4. 使用定时器函数（如setTimeout或setInterval）来控制图片切换的时间间隔。在定时器函数中，我们可以通过改变当前显示图片的序号，将显示的图片切换到下一张。 5. 切换图片时，可以通过修改图片元素的src属性来改变图片内容。 6. 添加事件监听器，使得用户可以手动切换图片。可以使用click事件监听器，当用户点击切换按钮时，改变当前显示图片的序号，从而实现手动切换图片。 7. 最后，为了达到循环播放的效果，当显示的图片序号超过最后一张图片时，可以将当前显示的图片序号重置为第一张。 通过以上步骤，我们就可以实现一个简单的JavaScript图片轮播效果。可以根据实际需求进行扩展，如添加过渡效果、添加图片描述等，以提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值