手机网站建设流程,郑州网站专业制作,做ftp网站怎么设置,企业微信app幻灯片自动播放图片是当前网站比较流行的一个展示方式。在网上我们能找到各种特效丰富的幻灯片插件和代码。这里项目需要#xff0c;我自己做了一个简单的#xff0c;就不详细讲解了#xff0c;代码很简单。直接看效果图和代码吧。所有代码 ppt.html#xff0c;需要提供相应…幻灯片自动播放图片是当前网站比较流行的一个展示方式。在网上我们能找到各种特效丰富的幻灯片插件和代码。这里项目需要我自己做了一个简单的就不详细讲解了代码很简单。直接看效果图和代码吧。 所有代码 ppt.html需要提供相应图片才能显示PPT Demo.ppt-container, .ppt-container ul, .ppt-container li, .ppt-container img {margin : 0;padding : 0;border : 0;}.ppt-container {width : 752px; /*根据展示图片的大小在这里设置容器的width和height*/height : 328px;position : relative;}.ppt-container img {width : 100%;height : 100%;}.ppt-container .hide {display : none;}.ppt-container ul.image-list li {position : absolute;top : 0px;left : 0px;}.ppt-container ul.button-list {list-style : none;position : absolute;right : 20px;bottom : 20px;}.ppt-container ul.button-list li {float : left;padding-right : 10px;}.ppt-container ul.button-list span {background : #E5E5E5;padding : 1px 7px;line-height : 20px;font-size : 13px;display : block;cursor : default;}.ppt-container ul.button-list span.selected {color : #FFF;background : #FF7000;}$(function() {var iCountOfImage 3; // 共三张图片var iPreIndex 0; // 上一次索引位置$(.ppt-container ul.button-list li span).click(function() {var iIndex $(this).attr(data-index);if(iIndex iPreIndex) {return; // 点击了当前图片不切换}$(.ppt-container .image-list li[data-index iIndex ]).fadeIn(1500);$(.ppt-container .image-list li[data-index iPreIndex ]).fadeOut(1500);iPreIndex iIndex;$(.ppt-container .button-list span).removeClass(selected);$(this).addClass(selected);});setInterval(function() { // 自动播放每5秒触发一次单击事件来播放幻灯片var iNextIndex (iPreIndex 1) % iCountOfImage;$(.ppt-container ul.button-list li span[data-index iNextIndex ]).click();}, 5000);});123
