本效果jQuery实现，可以实现大量信息的幻灯显示，用户可以任意设置幻灯片显示的数量，每张幻灯可以包含任意自定义的信息，包含文字和图片，幻灯片可以随意切换到指定页面，包含了上一页和下一页按钮，当浏览到最后一页时，再点击下一页会自动转到第一页，非常好用！
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<link rel="stylesheet" media="all" type="text/css" href="info-slide/info-slide.css" /> <script src="info-slide/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="info-slide/info-slide.js" type="text/javascript"></script>
在网页<body>区添加以下代码
<div> <div id="wrap"> <div id="slide"> <img id="loading" src="info-slide/loading.gif" alt="" /> <div id="p1"> <img src='info-slide/pic1.jpg' alt='' /> <h1>Image Number One</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra libero nec diam. Nam convallis viverra massa. Pellentesque blandit condimentum orci. Quisque sem nisi, iaculis in, lacinia ultricies, scelerisque non, lacus. Proin dolor nisi, consectetur a, faucibus id, egestas semper, libero. Sed dui. Sed porta tincidunt dui. Duis lacus elit, ultrices in, euismod a, ultrices id, eros. Suspendisse mattis libero quis arcu. Aliquam imperdiet dignissim dui. In leo. Maecenas suscipit eros vel diam. Suspendisse potenti. Maecenas tellus. Pellentesque sapien nibh, lobortis non, sollicitudin sit amet, imperdiet vehicula, orci. Mauris tellus diam, vulputate vel, sodales eget, rutrum at, dolor.</p> <a href="http://www.sharejs.com">more information...</a> </div> <div id="p2"> <img src='info-slide/pic2.jpg' alt='' /> <h1>Image Number Two</h1> <p>Morbi commodo. Praesent feugiat massa non mi. Duis imperdiet elit sit amet turpis. Suspendisse potenti. Mauris nec nisl vel nunc congue laoreet. Pellentesque convallis magna gravida elit. Duis non purus. Suspendisse rhoncus, erat et congue pharetra, leo tellus mollis dui, sit amet sollicitudin nisi leo quis metus. Proin ac massa in magna ullamcorper viverra. Nunc pulvinar malesuada justo.</p> <a href="http://www.sharejs.com">more information...</a> </div> <div id="p3"> <img src='info-slide/pic3.jpg' alt='' /> <h1>Image Number Three</h1> <p>Donec sodales diam sit amet libero. Vestibulum posuere dignissim est. Aliquam erat volutpat. Praesent et mi. Nulla facilisi. Nunc id eros nec felis eleifend imperdiet. Curabitur purus. Etiam egestas. Donec accumsan. Suspendisse tempor libero. Proin vel tellus. Sed suscipit lacus vitae risus. Curabitur vulputate. Ut dapibus arcu quis metus. Donec metus sem, placerat in, fermentum vestibulum, hendrerit in, dolor. Vivamus luctus metus fringilla augue. Proin sollicitudin condimentum nisi. Curabitur interdum metus ut neque. Ut et nibh. Duis laoreet enim id leo.</p> <a href="http://www.sharejs.com">more information...</a> </div> <div id="p4"> <img src='info-slide/pic4.jpg' alt='' /> <h1>Image Number Four</h1> <p>Nulla velit erat, congue at, tincidunt ac, aliquam facilisis, nisl. Phasellus a risus sed velit aliquam vestibulum. Quisque nec diam at lectus suscipit condimentum. Sed volutpat, lacus vel tempor consequat, magna enim mollis lorem, vel semper odio tellus tempus urna. Nullam dictum augue quis enim. Nulla elementum. Aliquam ullamcorper justo. Maecenas urna lacus, porttitor id, commodo et, dictum ac, nulla. Praesent egestas, nibh ac eleifend vestibulum, magna est tristique nibh, quis ornare ipsum diam non purus. In ut libero. Maecenas accumsan turpis id nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras posuere nunc vel purus.</p> <a href="http://www.sharejs.com">more information...</a> </div> <div id="p5"> <img src='info-slide/pic5.jpg' alt='' /> <h1>Image Number Five</h1> <p>Sed arcu. Proin eleifend, arcu vitae adipiscing dignissim, metus nisi suscipit dui, sit amet laoreet nibh nibh vel nisl. Nunc dui libero, varius in, vulputate eget, euismod sit amet, mi. Proin tempus lacinia metus. Ut purus diam, luctus suscipit, sodales nec, tincidunt ac, lorem. Etiam rutrum libero. Etiam sit amet quam eget odio pretium ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sit amet neque. Sed leo mi, fermentum eget, tempus ut, imperdiet quis, metus. Pellentesque vel risus eu orci dictum consectetur.</p> <a href="http://www.sharejs.com">more information...</a> </div> <div id="p6"> <img src='info-slide/pic6.jpg' alt='' /> <h1>Image Number Six</h1> <p>Maecenas lacinia elit. Pellentesque magna. Fusce ut ligula non ipsum tincidunt dapibus. Mauris dui nisi, iaculis id, malesuada et, ornare sit amet, sapien. Praesent quis quam non massa consectetur pretium. Suspendisse et enim. Aliquam scelerisque, massa at tincidunt rutrum, dui diam luctus neque, eget placerat risus metus blandit ipsum. Integer elementum aliquam magna. Etiam bibendum, sapien at molestie ultrices, leo dui porttitor est, non aliquet massa ipsum et dolor. Phasellus consectetur nisl in metus. In nec est sit amet lacus sagittis gravida. Maecenas vel diam quis elit interdum consectetur. Curabitur fermentum, velit at cursus dictum, dolor tellus elementum sapien, luctus facilisis quam dui eu felis.</p> <a href="http://www.sharejs.com">more information...</a> </div> <div id="p7"> <img src='info-slide/pic7.jpg' alt='' /> <h1>Image Number Seven</h1> <p>Aenean congue dolor ac orci. Donec ullamcorper nulla et leo. Vestibulum risus augue, vulputate ac, pellentesque ac, viverra in, orci. Aliquam erat volutpat. Mauris rutrum lacinia nisi. Curabitur pellentesque. Curabitur id ante. Duis suscipit, orci id tincidunt sollicitudin, risus nibh blandit dolor, vel tempus enim leo ut ipsum. Phasellus posuere. Ut nunc mi, molestie quis, sodales nec, condimentum quis, dolor. Sed a urna nec lorem sagittis bibendum. Sed congue velit in diam. In hac habitasse platea dictumst. Donec ut augue id massa dapibus eleifend. Nullam pretium orci quis risus. Donec fermentum dignissim nunc.</p> <a href="http://www.sharejs.com">more information...</a> </div> <div id="p8"> <img src='info-slide/pic8.jpg' alt='' /> <h1>Image Number Eight</h1> <p>Vivamus sed risus eu urna accumsan varius. In augue. Mauris in orci a mauris sodales semper. In hac habitasse platea dictumst. Vivamus mauris. Pellentesque ipsum neque, condimentum sit amet, faucibus vitae, iaculis et, dolor. Aliquam erat. Nunc adipiscing dolor eget eros. Nunc in lectus. Pellentesque magna quam, molestie non, facilisis nec, condimentum in, turpis. Etiam molestie ante non nulla iaculis dapibus. Cras non arcu.</p> <a href="http://www.sharejs.com">more information...</a> </div> <div id="p9"> <img src='info-slide/pic9.jpg' alt='' /> <h1>Image Number Nine</h1> <p>Sed hendrerit, massa malesuada molestie consectetur, tortor lacus mollis odio, gravida laoreet risus quam in nulla. Duis nulla ante, vehicula eget, dapibus vitae, mollis vitae, sapien. Maecenas placerat egestas lorem. Donec tincidunt mollis lorem. Proin auctor lobortis mi. Nullam vestibulum dui. Aenean suscipit neque sit amet nunc. Nam ut odio. Nullam pulvinar tristique enim. Curabitur at lectus eget lorem semper aliquam. Curabitur sodales. Duis nec ligula. Proin rhoncus lacinia erat. Nulla vel lectus ut lacus volutpat consectetur. Suspendisse interdum dapibus mauris. Praesent at nisl. Etiam elementum luctus nulla.</p> <a href="http://www.sharejs.com">more information...</a> </div> <div id="p10"> <img src='info-slide/pic10.jpg' alt='' /> <h1>Image Number Ten</h1> <p>Nulla facilisi. Ut in sem ac ante sodales porta. Donec nec sapien. Pellentesque molestie enim ac nibh. Nulla facilisi. Donec feugiat condimentum elit. Donec eget sem sed diam mollis hendrerit. Cras pellentesque libero a augue. Maecenas a tellus. Donec dictum. </p> <a href="http://www.sharejs.com">more information...</a> </div> </div> <div id="title"></div> <div id="previous"><b>Previous</b></div> <div id="next"><b>Next</b></div> <div id="buttons"> <div id="b1"><b>1</b></div> <div id="b2"><b>2</b></div> <div id="b3"><b>3</b></div> <div id="b4"><b>4</b></div> <div id="b5"><b>5</b></div> <div id="b6"><b>6</b></div> <div id="b7"><b>7</b></div> <div id="b8"><b>8</b></div> <div id="b9"><b>9</b></div> <div id="b10"><b>10</b></div> </div> </div>
在压缩包内包含了所有的图片、js和样式文件，请先下载！
