zoukankan      html  css  js  c++  java
  • 点击轮换

    script:

    $(function () {
        var sWidth = $("#smfocus").width();
        var len = $("#smfocus 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>";
        $("#smfocus").append(btn);
        $("#smfocus .btnBg").css("opacity", 0);
        $("#smfocus .btn span").css("opacity", 0.4).mouseenter(function () {
            index = $("#smfocus .btn span").index(this);
            showPics(index);
        }).eq(0).trigger("mouseenter");
        $("#smfocus .preNext").css("opacity", 0.0).hover(function () {
            $(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
        }, function () {
            $(this).stop(true, false).animate({ "opacity": "0" }, 300);
        });
        $("#smfocus .pre").click(function () {
            index -= 1;
            if (index == -1) { index = len - 1; }
            showPics(index);
        });
        $("#smfocus .next").click(function () {
            index += 1;
            if (index == len) { index = 0; }
            showPics(index);
        });
        $("#smfocus ul").css("width", sWidth * (len));
        $("#smfocus").hover(function () {
            clearInterval(picTimer);
        }, function () {
            picTimer = setInterval(function () {
                showPics(index);
                index++;
                if (index == len) { index = 0; }
            }, 2800);
        }).trigger("mouseleave");
        function showPics(index) {
            var nowLeft = -index * sWidth;
            $("#smfocus ul").stop(true, false).animate({ "left": nowLeft }, 300);
            $("#smfocus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300);
        }
    });

    css:

    #smfocus {overflow: hidden; position: relative;}
    #smfocus ul { 200px; height: 250px; float: left; position: absolute; clear: both; padding: 0px; margin: 0px; }
    #smfocus ul li { float: left;}
    #smfocus .preNext { 200px; height: 250px;  position: absolute; top: 0px; cursor: pointer; }
    #smfocus .pre { 22px; left: 0;background: url(../images/ljiantou.jpg)  no-repeat left center; display: block;}
    #smfocus .next { 38px; right: 0; background: url(../images/rjiantou.jpg)  no-repeat right center; display: block;}


    html:

    <div class="examplef" id="smfocus">
                            <ul>
                                <li>
                                    <a href="#" target="_blank">
                                        <img src="images/zs.jpg" alt="" /></a>
                                </li>
                                <li>
                                    <a href="#" target="_blank">
                                        <img src="images/zs.jpg" alt="" /></a>
                                </li>
                                <li>
                                    <a href="#" target="_blank">
                                        <img src="images/zs.jpg" alt="" /></a>
                                </li>
                                <li>
                                    <a href="#" target="_blank">
                                        <img src="images/zs.jpg" alt="" /></a>
                                </li>
                            </ul>
                        </div>

  • 相关阅读:
    前端兼容性问题总结
    javascript中Array类型常用方法
    TCP/IP基础知识
    Ajax
    angular 过滤器(日期转换,时间转换,数据转换等)
    angular学习笔记
    TCP协议三次握手过程分析
    TCP/IP基础知识
    Halcon形态学处理
    Halcon软件介绍与图像基本知识
  • 原文地址:https://www.cnblogs.com/zhouyx/p/5360315.html
Copyright © 2011-2022 走看看