分享一段轮换切图的效果

来源：互联网发布：打开淘宝跳转到天猫编辑：程序博客网时间：2024/05/01 20:01

 <style type="text/css">        .hdp        {            width: 754px;            height: 234px;            margin-top: 0px;            margin-bottom: 0px;        }        .right_R        {            width: 754px;            height: 234px;            float: right;            display: inline;            margin-bottom: 0;            margin-left: 0;        }        .pic        {            width: 754px;            height: 234px;            overflow: hidden;            border: 1px solid #C09999;        }        .pic ul        {            width: 6000px;//栏目越多，数字越大        }        .pic ul li        {            float: left;        }        .right_R .pic a        {            display: block;        }        .pic img        {            width: 754px;            height: 234px;        }        .pic_bg        {            width: 754px;            height: 34px;            position: absolute;            left: 1px;            bottom: 0px;            z-index: 1;            background-image: url(/images/Ddqzlx/pic_bg.png) !important;            background-repeat: no-repeat;        }        .pic_link        {            width: 754px;            height: 38px;            position: absolute;            left: 1px;            bottom: 0px;            z-index: 2;        }        .pic_link li        {            width: 118px;            height: 30px;            padding-top: 5px;            line-height: 30px;            float: left;            color: #af8d8d;            text-align: center;            cursor: pointer;        }        .pic_link li.xz        {            color: #FFFFFF;            background-image: url(/images/Ddqzlx/vip_bg.gi");            background-repeat: no-repeat;        }

<pre name="code" class="javascript"><script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>                                <script type="text/javascript">                                    //                                    var n_c_ser = 0;                                    function t_player(cur) {                                        $('.hdp .pic_link ul > li').eq(n_c_ser).removeClass("xz");                                        if (cur == null) {                                            n_c_ser = ++n_c_ser % 6;                                        } else {                                            n_c_ser = cur;                                        }                                        if (n_c_ser != 0) {                                            $('.hdp .pic ul > li').eq(0).children('div').remove();                                        }                                        $('.hdp .pic ul').animate({ marginLeft: (-1 * n_c_ser * $('.hdp .pic ul > li').width()) + 'px' });                                        $('.hdp .pic_link ul > li').eq(n_c_ser).addClass("xz");                                    }                                    var n_t = setInterval('t_player()', 5000);                                    $('.hdp .pic_link ul > li,.hdp .pic ul>li').live('mouseover', function () {                                        var self = this;                                        clearInterval(n_t);                                        $('.hdp .pic ul').stop();                                        var mid = $(self).attr('mid');                                        t_player(mid);                                    }).live('mouseout', function (e) {                                        if (checkHover(e, this)) {                                            n_t = setInterval('t_player()', 5000);                                        }                                    });                                </script>

 <div class="hdp">                                    <div class="right_R" style="position: relative; z-index: 10;">                                        <div class="pic_link">                                            <ul>                                                <li mid="0" class="xz"> </li>                                                <li mid="1" class> </li>                                                <li mid="2" class></li>                                                <li mid="3" class> </li>                                                <li mid="4" class> </li>                                                <li mid="5" class> </li>                                            </ul>                                        </div>                                        <div class="pic_bg">                                        </div>                                        <div class="pic">                                            <ul style="margin-left: -1424px;">                                                <li mid="0 ">                                                    <img src="/images/Ddqzlx/0.jpg"></li>                                                <li mid="1 ">                                                    <img src="/images/Ddqzlx/0.jpg"></li>                                                <li mid="2 ">                                                    <img src="/images/Ddqzlx/0.jpg"></li>                                                <li mid="3 ">                                                    <img src="/images/Ddqzlx/0.jpg"></li>                                                <li mid="4 ">                                                    <img src="/images/Ddqzlx/0.jpg"></li>                                                <li mid="5 ">                                                    <img src="/images/Ddqzlx/0.jpg" /></li>                                            </ul>                                        </div>                                    </div>                                </div>                                                          </div>

0 0