jquery兑现图片幻灯片切换代码 _Web前端

jquery实现图片幻灯片切换代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
??? <title></title>
??? <script type="text/javascript" src="jquery-1.2.6-vsdoc-cn.js"></script>
??? <style type="text/css">
??????? img{ width:100px; height:100px; }
??????? a.current{ color:#f00;}
??? </style>
??? <script type="text/javascript">
??????? (function ($) {
??????????? var defaults = {
??????????????? speed: 3000,
??????????????? frist: 0,
??????????????? auto: 1
??????????? };
??????????? $.fn.extend({
??????????????? slideshowpic: function (options) {
??????????????????? var slidedata = $.extend({}, defaults, options);
??????????????????? slidedata.slidepicbox = this;
??????????????????? $(document).ready(function () {
??????????????????????? picplay(slidedata.frist, slidedata);

??????????????????????? if (slidedata.slidebtnbox) {
??????????????????????????? slidebtn = slidedata.slidebtnbox.children();
??????????????????????????? slidebtn.each(function (i) {
??????????????????????????????? $(this).bind("click", function () {
??????????????????????????????????? //alert(i);
??????????????????????????????????? if (slidedata.auto) { clearTimeout(slidedata.autotime); }
??????????????????????????????????? picplay(i, slidedata);
??????????????????????????????? });
??????????????????????????? });
??????????????????????? }

??????????????????? });
??????????????? }
??????????? });

??????????? picplay = function (num, mydata) {
??????????????? var slidepic = mydata.slidepicbox.children();
??????????????? var total = slidepic.length;
??????????????? slidepic.filter(":visible").fadeOut("fast", function () {
??????????????????? $(this).removeClass("current");
??????????????????? slidepic.eq(num).fadeIn("slow");
??????????????????? slidepic.eq(num).addClass("current");
??????????????? });
??????????????? if (mydata.slidetitlebox) {
??????????????????? var slidetitle = mydata.slidetitlebox.children();
??????????????????? slidetitle.filter(":visible").hide("fast", function () {
??????????????????????? $(this).removeClass("current");
??????????????????????? slidetitle.eq(num).show();
??????????????????????? slidetitle.eq(num).addClass("current");
??????????????????? });
??????????????? }
??????????????? if (mydata.slidebtnbox) {
??????????????????? var slidebtn = mydata.slidebtnbox.children();
??????????????????? slidebtn.eq(num).addClass("current");
??????????????????? slidebtn.eq(num).siblings().removeClass("current");
??????????????? }
??????????????? if (mydata.auto) {
??????????????????? var index = num >= total - 1 ? 0 : num + 1;
??????????????????? //alert(index);
??????????????????? mydata.autotime = setTimeout(function () { picplay(index, mydata); }, mydata.speed);
??????????????? }
??????????? }

??????? })(jQuery);
??????? </script>
</head>
<body>
??? <div>
??????? <div id="slidepic">
??????????? <a href="#" title="标题1"><img src="image/pic1.jpg" />1</a>
??????????? <a href="#" title="标题2"><img src="image/pic2.jpg" />2</a>
??????????? <a href="#" title="标题3"><img src="image/pic1.jpg" />3</a>
??????????? <a href="#" title="标题4"><img src="image/pic2.jpg" />4</a>
??????? </div>
??????? <div id="slidetitle">
??????????? <a href="#">标题1</a>
??????????? <a href="#">标题2</a>
??????????? <a href="#">标题3</a>
??????????? <a href="#">标题4</a>
??????? </div>
??????? <div id="slidebtn">
??????????? <a href="#">1</a>
??????????? <a href="#">2</a>
??????????? <a href="#">3</a>
??????????? <a href="#">4</a>
??????? </div>
??????? <script type="text/javascript">
??????????? var configdata = {
??????????? slidetitlebox:$("#slidetitle"),//标题对象（可无）
??????????? slidebtnbox: $("#slidebtn"), //按钮对象（可无）
??????????? auto:1,//1自动播放/0不自动播放
??????????? speed: 3000,//播放速度
??????????? frist: 0//从第几张开始
??????????? };
??????? $("#slidepic").slideshowpic(configdata);
??????? </script>
??? </div>
</body>
</html>