图片轮播插件_setinterval() getelementsbytagname色块移动-CSDN博客

本文链接：https://blog.csdn.net/manbufenglin/article/details/7703261

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.ImgePlayerPlugin.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.fn.settings.menuId = "#play_text";
            $('#play_list').imgPlay();
        });
    </script>
</head><body>
<div id="play_list">
        <a href='http://catalog.vancl.com/shoes/fbxbyj20120521.html?source=manbufenglin'
            target='_blank'>
            <img src='http://i3.vanclimg.com/503/138/others/2012/6/6/byssy.jpg' alt='毕业季帆布鞋特辑59元起'
                title='毕业季帆布鞋特辑59元起' /></a>
                <a href='http://catalog.vancl.com/shoes/dcxmfbx20120621.html?source=manbufenglin'
                    target='_blank'><img src='http://i3.vanclimg.com/503/138/others/2012/6/21/ffssy.jpg'
                        alt='非凡熊猫帆布鞋抢购价79元起' title='非凡熊猫帆布鞋抢购价79元起' /></a></div>
    <div id="play_text">
    </div></body></html>

1、插件jquery.ImgePlayerPlugin.js 内容如下：

/// <reference path="jquery-1.4.1-vsdoc.js" />
/* @Title: 图片自动播放插件
 * @Author: manbufneglin 
*/
(function($){
//$(function () {
    $.fn.extend({
        imgPlay: function (options) {
            var opts = $.extend({}, $.fn.settings, options || {});
            var $this = $(this);
            var elementCount = $("a", $this).length;
            if (elementCount == 0) return;

            var $menuHtml = $("<ul></ul>");
            for (var i = 0; i < elementCount; i++) {
                $menuHtml.append("<li>" + (i + 1).toString() + "</li>");
            }
            $menuHtml.appendTo(opts.menuId);//创建菜单项

            var currMenuNum = 0;
            $("a:gt(0)", $this).hide();
            $(opts.menuId + " li").mouseover(function () {
                currMenuNum = $(this).text() - 1;//当前菜单码值
                $("a:visible", $this).fadeOut('fast', function () { $(this).parent().children().eq(currMenuNum).fadeIn(500); });
                $(this).css(opts.currentMenuStyle).siblings().css(opts.otherMenuStyle);//设置当前菜单及同辈菜单样式
                return false;
            })
            .eq(0).css(opts.currentMenuStyle);

            //让图片自动播放
            var autoID = setInterval(showAuto, opts.interval);
            $this.hover(function () {
                clearInterval(autoID);
            }, function () {
                autoID = setInterval(showAuto, opts.interval);
            });
            function showAuto() {
                currMenuNum = currMenuNum >= (elementCount - 1) ? 0 : ++currMenuNum;
                $(opts.menuId + " li").eq(currMenuNum).trigger('mouseover');
            };
        },
        settings: {
            interval: 5000,
            menuId: "#play_text",
            currentMenuStyle: { "background": "#7f0019", "color": "#fff", "font-weight": "bolder" },
            otherMenuStyle: { "background": "#fff", "color": "#7f0019", "font-weight": "normal" }
        }
    });
//});
})(jQuery);

2、样式style.css文件内容如下：

body
        {
            font-size: 12px;
            font-family: "宋体";
            color: #333;
        }
        a:link, a:visited
        {
            color: #333;
            text-decoration: none;
        }
        a:hover
        {
            color: #a10000;
            text-decoration: none;
        }       
        
        #play_text
        {
            margin-top: -10px;
            width: 200px;
            float: left;
        }
        #play_text UL
        {
            z-index: 3;
            position: relative;
            filter: Alpha(Opacity=80);
            list-style-type: none;
            margin-top: -17px;
            width: 200px;
            display: block;
            padding-top: 1px;
            left: 400px;
            _padding-top: 0px;
            opacity: 0.8;
        }
        #play_text UL LI
        {
            border-bottom: #cecece 1px solid;
            text-align: center !important;
            border-left: #cecece 1px solid;
            background-color: #fff;
            text-indent: 3px;
            margin: 2px;
            width: 15px;
            display: block;
            font-family: "Arial";
            float: left;
            height: 15px;
            color: #7f0019;
            font-size: 9px;
            border-top: #cecece 1px solid;
            cursor: pointer;
            border-right: #cecece 1px solid;
            padding-top: 3px;
        }
        #play_list A
        {
            display: block;
            overflow: hidden;
        }
        #play_list IMG
        {
            vertical-align: top !important;
            border: 1px solid #cccccc;
        }