JQuery图片滑动插件

效果预览：

(暂无)

html代码：

 <div id="focus">
                 <ul>
                     <li>
                         <a href="#"><img src="data:images/index2013/jdt.gif" /> </a>
                     </li>
                     <li>
                         <a href="#"><img src="data:images/index2013/jdt.gif" /> </a>
                     </li>
                     <li>
                         <a href="#"><img src="data:images/index2013/jdt.gif" /> </a>
                     </li>
                 </ul>
             </div>

js代码：

 <script type="text/javascript"
             src="http://lib.sinaapp.com/js/jquery/1.6/jquery.js "></script>
         <script type="text/javascript">
     $(document).ready(function() {
         slide();
     });
     function slide() {
         var focusDivName = "#focus";//焦点图所在div的id
         var sWidth = $(focusDivName).width(); // 获取焦点图的宽度（显示面积）
         var len = $(focusDivName + " ul li").length; // 获取焦点图个数
         var index = 0;
         var picTimer;

         // 以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
         var btn = "<div class='btnBg'></div><div class='btn'>";
         for ( var i = 0; i < len; i++) {
             btn += "<span></span>";
         }
         btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
         $(focusDivName).append(btn);
         $(focusDivName + " .btnBg").css("opacity", 0.0);

         // 为小按钮添加鼠标滑入事件，以显示相应的内容
         $(focusDivName + " .btn span").css("opacity", 0.4).mouseover(
                 function() {
                     index = $(focusDivName + " .btn span").index(this);
                     showPics(index);
                 }).eq(0).trigger("mouseover");

         // 上一页、下一页按钮透明度处理
         $(focusDivName + " .preNext").css("opacity", 0.2).hover(function() {
             $(this).stop(true, false).animate({
                 "opacity" : "0.5"
             }, 300);
         }, function() {
             $(this).stop(true, false).animate({
                 "opacity" : "0.2"
             }, 300);
         });

         // 上一页按钮
         $(focusDivName + " .pre").click(function() {
             index -= 1;
             if (index == -1) {
                 index = len - 1;
             }
             showPics(index);
         });

         // 下一页按钮
         $(focusDivName + " .next").click(function() {
             index += 1;
             if (index == len) {
                 index = 0;
             }
             showPics(index);
         });

         // 本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
         $(focusDivName + " ul").css("width", sWidth * (len));

         // 鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
         $(focusDivName).hover(function() {
             clearInterval(picTimer);
         }, function() {
             picTimer = setInterval(function() {
                 showPics(index);
                 index++;
                 if (index == len) {
                     index = 0;
                 }
             }, 4000); // 此4000代表自动播放的间隔，单位：毫秒
         }).trigger("mouseleave");

         // 显示图片函数，根据接收的index值显示相应的内容
         function showPics(index) { // 普通切换
             var nowLeft = -index * sWidth; // 根据index值计算ul元素的left值
             $(focusDivName + " ul").stop(true, false).animate({
                 "left" : nowLeft
             }, 300); // 通过animate()调整ul元素滚动到计算出的position
             // //为当前的按钮切换到选中的效果
             $(focusDivName + " .btn span").stop(true, false).animate({
                 "opacity" : "0.4"
             }, 300).eq(index).stop(true, false).animate({
                 "opacity" : "1"
             }, 300); // 为当前的按钮切换到选中的效果
         }
     };
 </script>

css代码：

 ul,li {
     list-style: none;
 }

 img {
     border:;
 }

 .wrapper {
     width: 625px;
     margin: 0 auto;
     padding-bottom: 50px;
 }

 h1 {
     height: 50px;
     line-height: 50px;
     font-size: 22px;
     font-weight: normal;
     font-family: "Microsoft YaHei", SimHei;
     margin-bottom: 20px;
 }

 /* focus */
 #focus {
     width: 625px;
     height: 220px;
     overflow: hidden;
     position: relative;
 }

 #focus ul {
     z-index:;
     height: 220px;
     position: absolute;
     padding-left: 0px;
 }

 #focus ul li {
     float: left;
     width: 625px;
     height: 220px;
     overflow: hidden;
     position: relative;
     background: #000;
 }

 #focus ul li div {
     position: absolute;
     overflow: hidden;
 }

 #focus .btnBg {
     position: absolute;
     width: 625px;
     height: 20px;
     left:;
     bottom:;
     background: #000;
 }

 #focus .btn {
     position: absolute;
     width: 625px;
     height: 10px;
     padding: 5px 10px;
     right:;
     bottom:;
     text-align: right;
 }

 #focus .btn span {
     display: inline-block;
     _display: inline;
     _zoom:;
     width: 25px;
     height: 10px;
     _font-size:;
     margin-left: 5px;
     cursor: pointer;
     background: #fff;
 }

 #focus .btn span.on {
     background: #fff;
 }

 #focus .preNext {
     width: 45px;
     height: 100px;
     position: absolute;
     top: 60px;
     background: url(images/index2013/sprite.png) no-repeat 0 0;
     cursor: pointer;
 }

 #focus .pre {
     left:;
 }

 #focus .next {
     right:;
     background-position: right top;
 }