html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享

末蓝、 2022-10-06 13:53 433阅读 0赞

本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效。分享给大家供大家参考。具体如下：

这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码，实现过程很简单。

运行效果图：-------------------查看效果 下载源码-------------------

![7c19f49dc661b7d3e970116ac9be5173.png][]

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。

为大家分享的js实现3D图片逐张轮播幻灯片特效代码如下

js实现3D图片逐张轮播幻灯片

ul\#bcty365\_nav\{padding-left:50px; margin-bottom:10px; border-bottom:2px solid \#ccc; overflow:hidden; \_zoom:1;\}

ul\#bcty365\_nav li\{float:left; display:inline; margin:10px;\}

ul\#bcty365\_nav li a\{display:block;color:\#000000; font-size:16px;\}

ul\#bcty365\_nav li a,\#wimoban\_p,\#wimoban\_p a\{ font-family:"微软雅黑";\}

ul\#bcty365\_nav li a:hover,\#wimoban\_p a:hover\{color:red;\}

\*\{margin:0;padding:0;list-style-type:none;\}

a,img\{border:0;\}

body\{font:12px/180% Arial, Helvetica, sans-serif,"新宋体";\}

/\* focus\_Box \*/

\#focus\_Box\{position:relative;width:710px;height:308px;margin:20px auto;\}

\#focus\_Box ul\{position:relative;width:710px;height:308px\}

\#focus\_Box li\{z-index:0;position:absolute; width:0px;background:\#787878;height:0px;top:146px;cursor:pointer;left:377px;border-radius:4px;box-shadow:1px 1px 12px rgba(200, 200, 200, 1)\}

\#focus\_Box li img\{width:100%;background:url(images/loading.gif) no-repeat center 50%;height:100%;vertical-align:top\}

\#focus\_Box li p\{position:absolute;left:0;bottom:0px;width:100%;height:40px;line-height:40px;background:url(images/float-bg.png) repeat;text-indent:8px;color:\#fff;\}

\#focus\_Box li p span\{display:inline-block;width:70%;height:40px;overflow:hidden;\}

\#focus\_Box .prev,\#focus\_Box .next\{display:block;z-index:100;overflow:hidden;cursor:pointer;position:absolute;width:52px;height:52px;top:131px;\}

\#focus\_Box .prev\{background:url(images/btn.png) left bottom no-repeat;left:0px\}

\#focus\_Box .next\{background:url(images/btn.png) right bottom no-repeat;right:0px\}

\#focus\_Box .prev:hover\{background-position:left top;\}

\#focus\_Box .next:hover\{background-position:right top;\}

\#focus\_Box a.imgs-scroll-btn\{display:block;position:absolute;z-index:110;top:7px;right:15px;width:51px;height:23px;overflow:hidden;background:url(images/share-btn.png) no-repeat;text-indent:-999px;\}

*  [![这个时代 你所追求的是什么？][Image 1]][_Image 1]
    
    这个时代 你所追求的是什么？
    
    [分享][_Image 1]
 *  [![我们所追求的不是拥有一切，而是拥有值得的一切][Image 1]][_Image 1]
    
    我们所追求的不是拥有一切，而是拥有值得的一切
    
    [分享][_Image 1]
 *  [![一段旅程，两个城市，潮流正在被重塑][Image 1]][_Image 1]
    
    一段旅程，两个城市，潮流正在被重塑
    
    [分享][_Image 1]
 *  [![你的眼光、激情、创意和内涵，也在重塑着城市的潮流][Image 1]][_Image 1]
    
    你的眼光、激情、创意和内涵，也在重塑着城市的潮流
    
    [分享][_Image 1]
 *  [![在这里，抛开重重限制，释放真实自我][Image 1]][_Image 1]
    
    在这里，抛开重重限制，释放真实自我
    
    [分享][_Image 1]

[7c19f49dc661b7d3e970116ac9be5173.png]: /images/20221005/7ed043df7a2e48f1b2a0c97f4a98793a.png
[Image 1]: 
[_Image 1]: /images/20221005/e967158a30bc4ad5b13f433204b1f88d.png