zhuang

Jquery实现图片自动切换  

2011-03-28 17:29:23|  分类: jquery |  标签:jquery学习   |举报 |字号 订阅

    今天做一个网站,里面要用到4张图片自动切换的效果,本来是用flash实现的。ie8.0中flash的宽度是980px没错。但是奇怪的就是我页面宽度也是980px。可是偏偏在ie8.0下QQ截图一量无故多出了个40px,这样的感觉就是flash两边变短了。更郁闷的是,在其他人的电脑和浏览器都没问题。偏偏在我和客户的电脑就出现这种问题。找不到方法解决的情况下,只用jquery去实现我想要的效果了。

html代码:

<body>
    <br />
    <div style="height: 230px; width: 680px; background: #EBEBEB; position: relative"
        id="flash_outer">
        <div style="position: absolute; left: 0px; top: 0px; width: 680px; height: 230px;
            overflow: hidden" id="flash_pic">
            <div>
                <img src="@Url.Content("~/Content/images/jt0.jpg")" alt="" class="imgLittle" />
            </div>
            <div>
                <img src="@Url.Content("~/Content/images/jt1.jpg")" alt="" class="imgLittle" />
            </div>
            <div>
                <img src="@Url.Content("~/Content/images/jt5.jpg")" alt="" class="imgLittle" />
            </div>
            <div>
                <img src="@Url.Content("~/Content/images/lycd200.jpg")" alt="" class="imgLittle" />
            </div>
        </div>
        <ul style="position: absolute; right: 0px; bottom: 0px; height: 16px" id="flash_num">
            <li class="click_over">1</li>
            <li class="click_out">2</li>
            <li class="click_out">3</li>
            <li class="click_out">4</li>
        </ul>
    </div>
</body>

 

css代码:

 

 <style type="text/css">
        *
        {
            font-size: 12px;
            font-family: Verdana;
            margin: 0;
            padding: 0;
        }
        ul
        {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        .click_out
        {
            margin-left: 5px;
            float: left;
            text-align: center;
            height: 16px;
            line-height: 16px;
            width: 16px;
            background: #333;
            color: #FFF;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
            _display: inline-block;
        }
       
        .click_over
        {
            margin-left: 5px;
            float: left;
            text-align: center;
            height: 16px;
            line-height: 16px;
            width: 16px;
            background: #820000;
            color: #FFF;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
            _display: inline-block;
        }
    </style>

jquery代码:

 

   <script type="text/javascript">
        $(document).ready(function () {
            var len = $("#flash_num>li").length;
            var index = 1;
            var int;
            function showSys(num)  //图片切换函数
            {
                $("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
                $("#flash_pic>div").fadeOut().eq(num).fadeIn();
            }
            function ziDong()  //自动切换
            {
                if (index == len) {
                    index = 0;
                }
                showSys(index);
                index = index + 1;
            }
            int = setInterval(ziDong, 2000);
            $("#flash_num>li").click(function()
            {
            var index_num=$("#flash_num>li").index(this);
            showSys(index_num);
            index=index_num+1;  //改变全局变量的值,以便鼠标移开的时候能够衔接上
            });
            $("#flash_outer").mouseover(function ()  //移动到上面时停止自动切换
            {
                clearInterval(int);
            });
            $("#flash_outer").mouseout(function ()  //移开时继续自动切换
            {
            int = setInterval(ziDong, 2000);
            });
        })
    </script>

你可能感兴趣的:(zhuang)