个人网站做博客还是做论坛,网络服务推广,水滴信用企业查询官网,昆明制作手机网站幻灯片自动播放图片是当前网站比较流行的一个展示方式。在网上我们能找到各种特效丰富的幻灯片插件和代码。这里项目需要#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
