找回密码
 注册【推荐qq微信】

QQ登录

只需一步,快速开始

查看: 17682|回复: 3

[原创] 【html代码】图片自动切换演示

[复制链接]
古来稀 发表于 20.11.15 19:00:37 | 显示全部楼层 |阅读模式







 楼主| 古来稀 发表于 20.11.15 19:01:38 | 显示全部楼层
代码如下:


<div style="left: -206px; top: 160px; width: 1000px; position: relative;">
<style type="text/css">
.dyn_pic0        {
        width:0px;
        height:100%;
        position:absolute;
        left:100%;top:0px;
}
.turn_pic0        {
        animation:turn_pic_v 4s 1 linear forwards;
}
@keyframes turn_pic_v {
        from {
                width:0px;left:50%;opacity:0.6;
        }
        to        {
                width:100%;left:0px;opacity:1;
        }
}


</style>

<div style="width:1000px;height:625px;position:relative;background:skyblue;border:thick ridge brown;">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180004h6m6rpkpvym4lc.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180006keg2zgopotqtt02.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180007hoyjo4jue4vejypu.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180008bfcq3jfjzstsj.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180008xjdahhjajvizjxah.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/18000r0zndx8h5rdg5rlx.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/18000iqyl75d3c1y1j5uj.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180010aipkxzr0x5juxcyi.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180010zwrwfeyrf0ricv0j.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180011yqo7bpn0ib06cd0y.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180004vpm883n8nqqvrg2q.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180004h6m6rpkpvym4lc.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180006keg2zgopotqtt02.jpg">
</div>



<script type="text/javascript">
        function hasClass( elements,cName ){
          return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
        };
        function addClass( elements,cName ){
          if( !hasClass( elements,cName ) ){
                elements.className += " " + cName;
          };
        };
        function removeClass( elements,cName ){
          if( hasClass( elements,cName ) ){
                elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
          };
        };
        var curIdx = 0;
        var dyn_pics0 = document.getElementsByClassName('dyn_pic0');
        var lastIdx = dyn_pics0.length - 1;
        function turn_cur_pic0()        {
                removeClass(dyn_pics0[lastIdx], 'turn_pic0');
                dyn_pics0[lastIdx].parentElement.style.backgroundImage = "url(" + dyn_pics0[lastIdx].src + ")";
                dyn_pics0[lastIdx].parentElement.style.backgroundSize = "cover";
                addClass(dyn_pics0[curIdx], 'turn_pic0' );
                lastIdx = curIdx;
                curIdx++;
                curIdx %= dyn_pics0.length;
                setTimeout(turn_cur_pic0, 6000);
        }

        turn_cur_pic0();

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


 楼主| 古来稀 发表于 20.11.16 10:03:42 | 显示全部楼层

[size=14.px]老朋友上午好!
[size=14.px]非常感谢您的回复与支持!

本版积分规则

QQ|小黑屋|哈公网监备2301001704号|手机版|哈尔滨论坛 ( 黑ICP备2022001648号-1 ) 2008-2022十五年老站 关于我们

GMT+8, 24.3.29 22:41 , Processed in 0.034683 second(s), 22 queries , Gzip On.

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

快速回复 返回顶部 返回列表