js控制图片切换

最新推荐文章于 2020-04-18 17:01:59 发布
最新推荐文章于 2020-04-18 17:01:59 发布
阅读量189 收藏
点赞数
分类专栏： JS 文章标签： JavaScript .net C++ C C# ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyangzi5/article/details/83640673
版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片自动翻动播放 - www.codefans.net</title>
<style type="text/css">
<!--
.t14 {font-size: 9pt; line-height: 130%; text-decoration: none;}
.dg12 {font-size: 9pt; line-height: 14px; color: #0066cc; text-decoration: none}
.ttzy {font-size: 9pt; line-height: 16px; text-decoration: none; color: #A34F17}
a:hover {  text-decoration: underline}
a {  font-size: 12px}
.fdg12 {  font-weight:bold;font-size: 12px; line-height: 14px; color: #3D93BF; text-decoration: none}
.s { font-weight:bold; float:left; font-size:12px;padding:0 2px;border-right:1px solid #666; border-bottom:1px solid #666; margin:3px 0 0 5px;}
.s a{   text-decoration:none;  color:#bc2931; }
.s a:hover{ color:red;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="headlineLayer" style="position:absolute; width:219px; height:0px; z-index:37; border: 1px none #000000;FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=1, motion='forward');">
  <table id='headline1' width='219' border='0' cellspacing='0' cellpadding='0' align='center' height='50'>
    <tr>
      <td>
        <table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
          <tr>
            <td width="101" class="dg12"></td>
            <td width="52" class="dg12"></td>
            <td colspan="2" width="66" height="1">
              <!--
              <div align="center">
                <div class="s">1</div>
                <div class="s"><a href="javascript:jumpHeadline(2)">2</a></div>
                <div class="s"><a href="javascript:jumpHeadline(3)">3</a></div>
              </div>
-->
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center">
        <table width="366" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><a href="http://www.codefans.net" target="_blank"><img src=http://www.codefans.net/jscss/demoimg/wall5.jpg width="329" height="228" vspace="6" border="0"><br>五一黄金周我们旅游再次出现高峰</a></td></tr></table>
      </td>
    </tr>
  </table>
</div>
<table id='headline1' border='0' cellspacing='0' cellpadding='0' height='50' style='display:none' width="219">
  <tr>
    <td>
      <table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
        <tr>
          <td width="101" class="dg12"></td>
          <td width="52" class="dg12"></td>
          <td colspan="2" width="66" height="1">
            <!--
            <div align="center">
              <div class="s">1</div>
              <div class="s"><a href="javascript:jumpHeadline(2)">2</a></div>
              <div class="s"><a href="javascript:jumpHeadline(3)">3</a></div>
            </div>
-->
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center"><a href="/" target='_blank' class='ttzy'></a>
      <table width="366" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><a href=/ target="_blank"><img src=http://www.codefans.net/jscss/demoimg/wall7.jpg width="329" height="228" vspace="6" border="0">
<br>人间仙镜，世外桃源</a></td></tr></table>
    </td>
  </tr>
</table>
<table id='headline2' width='219' border='0' cellspacing='0' cellpadding='0' height='50' style='display:none'>
  <tr>
    <td>
      <table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
        <tr>
          <td width="101" class="dg12"></td>
          <td width="52" class="dg12"></td>
          <td colspan="2" width="66" height="1">
            <!--
            <div align="center">
              <div class="s"><a href="javascript:jumpHeadline(1)">1</a></div>
              <div class="s">2</div>
              <div class="s"><a href="javascript:jumpHeadline(3)">3</a></div>
            </div>
-->
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center"><a href="/" target='_blank' class='ttzy'></a>
      <table width="366" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top"><a href=/jscss/ target="_blank"><img src=http://www.codefans.net/jscss/demoimg/wall8.jpg  width="329" height="228" vspace="6" border="0"><br>黄金周成为摄影爱好者的天堂</a></td></tr></table>
    </td>
  </tr>
</table>
<table id='headline3' width='219' border='0' cellspacing='0' cellpadding='0' height='50' style='display:none'>
  <tr>
    <td>
      <table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
        <tr>
          <td width="101" class="dg12"></td>
          <td width="52" class="dg12"></td>
          <td colspan="2" width="66" height="1">
            <!--
            <div align="center">
              <div class="s"><a href="javascript:jumpHeadline(1)">1</a></div>
              <div class="s"><a href="javascript:jumpHeadline(2)">2</a></div>
              <div class="s">3</div>
            </div>
-->
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center"><a href=/ target='_blank' class='ttzy'></a>
      <table width="366" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top"><a href=/ target="_blank"><img src=http://www.codefans.net/jscss/demoimg/wall9.jpg  width="329" height="228" vspace="6" border="0"><br>我们应冷静看待黄金周过后的社会危机</a></td>               </tr>             </table>
    </td>
  </tr>
</table>
<script language="javascript">
var currentIEBrowser = navigator.appName.indexOf("Microsoft") != -1;
var currentL=1;
var first=true;
function switchContent() {
 
    if(currentL >=4) currentL=1;
     if(first) currentL++;
    jumpHeadline(currentL++);
   
}
function jumpHeadline(c) {
    first=false;
 if(c < 1 || c >= 4) return;
 if(currentIEBrowser)
 {
  headlineLayer.filters[0].apply();
     headlineLayer.innerHTML = "<TABLE width='219' border='0' cellspacing='0' cellpadding='0' align='center'>"+document.getElementById('headline'+c).innerHTML+"</TABLE>";
  headlineLayer.filters[0].play();
 }else
 {
     document.getElementById('headlineLayer').innerHTML = "<TABLE width='219' border='0' cellspacing='0' cellpadding='0' align='center'>"+document.getElementById('headline'+c).innerHTML+"</TABLE>";
 }
 
} 

setInterval("switchContent()",5000); 
</script>
</body>
</html>

jyangzi5
关注
专栏目录
JS控制图片
qq_62521480的博客
05-17 435
编程实现：节点操作应用，界面有一原图，要求如下： 1.点击“增加图片”按钮，随机增加一张图片，让其显示在已有图片的最后面。 2.点击“删除图片”按钮，删除最后一张图片，原图不能删。 3.点击“复制图片”按钮，复制原图，显示在已有图片的最后面。 4.点击“替换原图”按钮，将原图或复制的原图，随机替换成其他一张。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> &
原生js按钮控制图片切换代码.zip
07-11
综上所述，原生JavaScript结合CSS3属性可以实现多种图片切换效果，通过按钮控制，我们可以为用户提供更加丰富的交互体验。无论是在网站设计还是移动应用开发中，这些技巧都具有很高的实用价值。
[转]JS控制-图片滚动切换效果（实用）
12-13 103
<!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> &l...
js事件图片切换
七月的你的博客
08-26 922
通过实现点击上一张，下一张按钮来切换图片，同时显示图片数量以及当前图片是第几张 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
JS实现图片切换
https://github.com/Wheeeeeeeeels
11-07 1361
Bootstrap-js 开发 window.onload=function () { //获取元素 var pre = document.getElementById("pre");
js控制图片
weixin_30297281的博客
11-30 57
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...
JS控制图片切换,两侧带焦点图
05-25
JS控制图片切换效果,两侧带焦点图！js控制图片切换特效！
javascript图片切换综合实例（循环切换、顺序切换）
10-22
`：获取控制图片切换的“下一张”按钮。 - `var oBack=document.getElementById("back");`：获取控制图片切换的“上一张”按钮。 - `var oImg=document.getElementById("img");`：获取用于显示图片的`img`元素。 - `...
Three.js碎片化图片切换特效
07-24
总的来说，Three.js碎片化图片切换特效是一个结合了3D图形、粒子动画和JavaScript交互的创新应用，它展示了WebGL和Three.js在网页设计中的强大潜力。通过深入学习和实践，开发者可以创建出更多令人惊叹的3D视觉体验...
原生js图片轮播切换代码
06-24
- 使用`addEventListener`方法监听用户的点击事件，当用户点击索引按钮或左右控制按钮时，触发相应的图片切换函数。 4. **CSS样式控制**： - 为了实现轮播效果，可能需要借助CSS来设置动画过渡效果，例如使用`...
js实现图片自动切换效果
03-09
js实现图片自动切换，多种效果实现，类似于幻灯片形式的
只用css控制的图片切换
weixin_34095889的博客
10-02 155
一个纯DIV+CSS制作的图片切换的实例，高手制作，值得收藏，纯css制作的图片切换更有利于搜索引擎的收录和友好。下面我们看一下高手是怎么写的纯CSS图片切换的。 <!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-str...
js设置图片切换
weixin_39190732的博客
04-18 457
HTML代码 <div class="viewpager"> <img src="/static/index/images/banner1.jpg" id="change"/> </div> 3张图片 //原生获取DOM对象 //var change=document.getElementById('change'); //jQuery获取DOM对象 var...
图片切换的控制
qq_38876038的博客
09-06 118
如图做一个类似网易广告 点击左边的相关新闻就可以切换中间的图片！ 下面我们来分析一下。 1.获取相关节点 左边的五个和中间的一个盒子 2.绑定点击事件 3.设置左边盒子的背景变化 那么我们用如下代码 ！ alldiv[0].style.backgroundColor="black" img2.src=arr2[0] ...
利用JS实现图片切换
热门推荐
dweblover的博客
11-19 4万+
事件举例: 1.要求实现效果：当鼠标悬停在照片上时更换为另一张照片；当鼠标离开时，还原为本来的图片。 说明： 1.一般来说对于一个事件问题处理起来分为三个步骤： （1）获取事件 （2）绑定事件 （3）书写事件驱动程序 代码如下 &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&q
js实现切换图片
追寻那一份....
03-12 454
var i=0; var pic=new Array(); pic[0]=””; pic[1]=””; pic[2]=””; pic[3]=””; function change(){ t=setTimeout(‘change()’,2500) i=i%4; document.getElementById(“mypic”).innerHTML=pic[i]; i=i+1; }
用JS实现图片切换
天空守护云
01-23 142
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;事件&lt;/title&gt; &lt;style type="text/css"&gt; img{width: 400px;} &lt;/style&am
js实现点击图片的切换
qq_33205354的博客
05-12 7221
点击图片切换为另一个图片，再点击后又会变为原来的图片&lt;img src="images/del.png" id="img"&gt;&lt;script&gt;var image=document.getElementById('img');image.onclick=function (){var mysrc=image.getAttribute('src');if(mysrc=='image...
JS图片切换
linqunbin的博客
05-24 1319
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
使用JavaScript实现按钮控制图片切换
本文主要介绍了如何使用JavaScript实现一个简单的图片轮播功能，用户可以通过点击“上一张”和“下一张”按钮来切换显示的图片。示例代码包括HTML结构、CSS样式以及JavaScript逻辑。 首先，HTML部分创建了一个包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值