- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>PPT Demo</title>
- <style type="text/CSS">
- .ppt-container, .ppt-container ul, .ppt-container li, .ppt-container img {
- margin: 0;
- padding: 0;
- border: 0;
- }
- .ppt-container {
- width: 361px; /*根据展示图片的大小在这里设置容器的width和height*/
- height: 264px;
- position: relative;
- }
- .ppt-container img {
- width: 100%;
- height: 100%;
- border: 1px solid blue;
- }
- .ppt-container .hide {
- display: none;
- }
- .ppt-container ul.image-list li {
- position: absolute;
- top: 0px;
- left: 0px;
- }
- .ppt-container ul.image-list li span {
- position: absolute;
- top: 219px;
- left: 1px;
- display: inline-block;
- width: 100%;
- height: 30px;
- padding-top: 5px;
- background-color: #000000; /* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
- background-color: rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂,但解析为透明 */
- }
- .ppt-container ul.image-list li span a {
- color: #fff;
- }
- .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: #A70B0E;
- }
- </style>
- </head>
- <body>
- <div class="ppt-container">
- <ul class="image-list">
- <li data-index="0">
- <img src1="./Skin/Default/img/xinwen.png" />
- <span><a>这是1号标题</a></span>
- </li>
- <li data-index="1" class="hide">
- <img src1="./Skin/Default/img/chenggong.png" />
- <span><a>这是2号标题</a></span>
- </li>
- <li data-index="2" class="hide">
- <img src1="./Skin/Default/img/chenggong1.png" />
- <span><a>这是3号标题</a></span>
- </li>
- <li data-index="3" class="hide">
- <img src1="./Skin/Default/img/xinwen.png" />
- <span><a>这是4号标题</a></span>
- </li>
- </ul>
- <ul class="button-list">
- <li><span data-index="0" class="selected">1</span></li>
- <li><span data-index="1">2</span></li>
- <li><span data-index="2">3</span></li>
- <li><span data-index="3">4</span></li>
- </ul>
- </div>
- </body>
- <script src1="js/jquery.js"></script>
- <script type="text/javascript">
- $(function () {
- var iCountOfImage = 4; // 共三张图片
- 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);
- });
- </script>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/1108201513400.html
来源: http://www.codesnippet.cn/detail/1108201513400.html