【代码演示】学本网几位老友图片自动切换代码演示

九品莲花 · 发表于 2020-11-15 19:14

本帖最后由九品莲花于 2020-11-19 09:25 编辑

九品莲花 · 发表于 2020-11-15 19:15

本帖最后由九品莲花于 2020-11-16 15:30 编辑

代码如下：

<div style="left: -206px; top: 160px; width: 1000px; position: relative;">
<style type="text/css">

@import "http://cesholl.cn3v.net/style/dynPictureChg.css"

</style>

<script type="text/javascript" >
!window.addClass && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/class_oper.js" charset="utf-8"><\/script>');

!window.dynPicInit && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/dynPictureChg.js" charset="utf-8"><\/script>');
</script>

<div id="图片框" style="width:1000px;height:640px;position:relative;background:skyblue;border:thick ridge brown;">
</div>
<script type="text/javascript">
      var       picArr = [
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180004h6m6rpkpvy9m4lc9.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180006keg2zgopotqtt902.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180007hoyjo4jue4vejypu.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180008b9fcq39jf9jzstsj.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180008xjdahhjajvizjxah.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180009r0zndx8h5rdg5rlx.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180009iqyl75d3c1y1j5uj.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180010aipkxzr0x5juxcyi.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180010zwrwfeyrf0ricv0j.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180011yqo7bpn0ib06cd0y.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180004vpm883n8nqqvrg2q.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180004h6m6rpkpvy9m4lc9.jpg",
      "http://bbs.foz.cn/data/attachment/forum/202010/27/180006keg2zgopotqtt902.jpg"];
      var opts = {
            picFrameID:'图片框',
            picturesData:picArr,
            chgType:0
      };

      dynPicInit(opts);

</script></b></font></div></p><p><br><br><br><br><br><br><br><br><br></p></div>

十一种切换方式如下：

切换方式从0 到 10 共有11种可选择
0、中间垂直展开
1、中间水平展开
2、中心展开
3、水平由上向下展开
4、水平由下向上展开
5、垂直从左向右展开
6、垂直从右向左展开
7、从左上角展开
8、从右上角展开
9、从左下角展开
10、从右下角展开

chgType:5
调整红色数字，变换切换方式。

九品莲花 · 发表于 2020-11-15 19:15

九品莲花 · 发表于 2020-11-15 19:16

本帖最后由九品莲花于 2020-11-15 19:37 编辑

代码如下：

<script language="javascript">
var curIndex=0;
//
var timeInterval=2200;
var arr=new Array();
arr[0]="http://bbs.foz.cn/data/attachment/forum/202010/26/131512slbz0v9m0clv00h3.jpg";
arr[1]="http://bbs.foz.cn/data/attachment/forum/202010/26/131512mbbbb3b6fwkfmhwm.jpg";
arr[2]="http://bbs.foz.cn/data/attachment/forum/202010/26/131513z4z5zo5mx5ovosgv.jpg";
arr[3]="http://bbs.foz.cn/data/attachment/forum/202010/26/131513gml9f5v7qfm55fjf.jpg";
arr[4]="http://bbs.foz.cn/data/attachment/forum/202010/26/131514t3nv4sv5xz6d6evs.jpg";
arr[5]="http://bbs.foz.cn/data/attachment/forum/202010/26/131514iyoqa9aab9hh8omr.jpg";
arr[6]="http://bbs.foz.cn/data/attachment/forum/202010/26/131515f9es79jebuyglc2g.jpg";
arr[7]="http://bbs.foz.cn/data/attachment/forum/202010/26/131515phcwlcwfmiiex5fe.jpg";
arr[8]="http://bbs.foz.cn/data/attachment/forum/202010/26/131516jzx4lmic5l4ip5ml.jpg";
arr[9]="http://bbs.foz.cn/data/attachment/forum/202010/26/131512slbz0v9m0clv00h3.jpg";
arr[10]="http://bbs.foz.cn/data/attachment/forum/202010/26/131512mbbbb3b6fwkfmhwm.jpg";
arr[11]="http://bbs.foz.cn/data/attachment/forum/202010/26/131513z4z5zo5mx5ovosgv.jpg";
arr[12]="http://bbs.foz.cn/data/attachment/forum/202010/26/131513gml9f5v7qfm55fjf.jpg";
arr[13]="http://bbs.foz.cn/data/attachment/forum/202010/26/131514t3nv4sv5xz6d6evs.jpg";
arr[14]="http://bbs.foz.cn/data/attachment/forum/202010/26/131514iyoqa9aab9hh8omr.jpg";
arr[15]="http://bbs.foz.cn/data/attachment/forum/202010/26/131515f9es79jebuyglc2g.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];
}
</script>
<img id="obj" border="0" src="photos/1.jpg" width="722" height="932"></b></font></div>

九品莲花 · 发表于 2020-11-15 19:17

真真 · 发表于 2020-11-15 19:18

自动切换演示，老师好棒。

九品莲花 · 发表于 2020-11-15 19:18

本帖最后由九品莲花于 2020-11-15 19:38 编辑

代码如下：

<style type="text/css">
#pichold       {
      width:30000px;
      height:728px;
      animation: pshift 160s ease-out infinite alternate;
}
#pichold img       {width:1000px;height:728px;float:left;}
#outframe       {
      width:1000px;
      height:728px; margin:160px 0 16px -202px;
      overflow:hidden;
      border-radius:32px;

      position:relative;

      ----webkit-mask-image: radial-gradient(black 60%, transparent 90%);
}

@keyframes pshift {
      0%,3% {
            margin-left: 0px;
      }

      4%,7% {
            margin-left: -1000px;
      }

      8%,11% {
            margin-left: -2000px;
      }

      12%,15% {
            margin-left: -3000px;
      }

      16%,19% {
            margin-left: -4000px;
      }

      20%,23% {
            margin-left: -5000px;
      }

      24%,27% {
            margin-left: -6000px;
      }

      28%,31% {
            margin-left: -7000px;
      }
      32%,35% {
            margin-left: -8000px;
      }
      36%,39% {
            margin-left: -9000px;
      }
      40%,43% {
            margin-left: -10000px;
      }
      44%,47% {
            margin-left: -11000px;
      }
      48%,51% {
            margin-left: -12000px;
      }
      52%,55% {
            margin-left: -13000px;
      }
      56%,59%{
            margin-left: -14000px;
      }
      60%,63% {
            margin-left: -15000px;
      }
      64%,67% {
            margin-left: -16000px;
      }
      68%,71% {
            margin-left: -17000px;
      }
      72%,75% {
            margin-left: -18000px;
      }
      76%,79% {
            margin-left: -19000px;
      }
      80%,83% {
            margin-left: -20000px;
      }
      84%,87% {
            margin-left: -21000px;
      }
      88%,91% {
            margin-left: -22000px;
      }
      94%,97% {
            margin-left: -23000px;
      }
      98%,100% {
            margin-left: -24000px;
      }
}
</style>
<script type="text/javascript" >
!window.procLRC && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/processLRC0.js" charset="utf-8"><\/script>');
</script>


<script type="text/javascript">
var opts = {


};

setTimeout(function(){procLRC(opts);}, 1000);
</script>

</textarea>

<div id="outframe">
<div id="pichold">
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031709b4202eqcz3t4u4au.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031729kf84y44i8or00lbp.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031740nyy88sz7f1ifi2jh.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031801kuxm1u1us5mu5z5f.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031822saz6kgg40lqamg4q.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031842ewaiimp2v46m36py.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032416ygr20dkbgg8gw2s2.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032456hv3927at2d2au5uu.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032512guhditmu6mewjues.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032712zstyto6rehy6hhr1.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031709b4202eqcz3t4u4au.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031729kf84y44i8or00lbp.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031740nyy88sz7f1ifi2jh.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031801kuxm1u1us5mu5z5f.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031822saz6kgg40lqamg4q.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031842ewaiimp2v46m36py.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032416ygr20dkbgg8gw2s2.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032456hv3927at2d2au5uu.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032512guhditmu6mewjues.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032712zstyto6rehy6hhr1.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031709b4202eqcz3t4u4au.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031729kf84y44i8or00lbp.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031740nyy88sz7f1ifi2jh.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031801kuxm1u1us5mu5z5f.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031822saz6kgg40lqamg4q.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/031842ewaiimp2v46m36py.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032416ygr20dkbgg8gw2s2.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032456hv3927at2d2au5uu.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032512guhditmu6mewjues.jpg" />
<img src="http://bbs.foz.cn/data/attachment/forum/201510/05/032712zstyto6rehy6hhr1.jpg" />
</div><br><br><br><br>

山水人家 · 发表于 2020-11-15 19:42

九品莲花发表于 2020-11-15 19:18
代码如下：

欣赏学习老友图片自动切换代码演示，谢谢分享了，晚上好。

青松岭 · 发表于 2020-11-15 19:44

欣赏老师佳作：学本网几位老友图片自动切换代码演示

许森匡. · 发表于 2020-11-15 19:46

欣赏佳作！谢谢分享代码！

帐号		自动登录	找回密码
密码			注册会员

【代码演示】学本网几位老友图片自动切换代码演示

评分

评分

评分

评分

评分

评分