图片轮播（原创）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="slide_wp">
    <ul class="img_wp">
        <li>
            <a href="javascript:;"><img src="http://www.jq22.com/img/cs/500x300-1.png" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="http://www.jq22.com/img/cs/500x300-2.png" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="http://www.jq22.com/img/cs/500x300-3.png" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="http://www.jq22.com/img/cs/500x300-4.png" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="http://www.jq22.com/img/cs/500x300-5.png" alt=""></a>
        </li>
    </ul>
    <ol>
        <!-- <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
    </ol>
    <button class="handle_btn left_btn">&lt;</button>
    <button class="handle_btn right_btn">&gt;</button>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
* {
    padding:0;
    margin:0;
}
li {
    list-style:none;
}
.slide_wp {
    width:720px;
    height:520px;
    margin:20px auto;
    border:2px solid #e31414;
    position:relative;
    text-align:center;
    overflow:hidden;
}
img {
    width:720px;
    height:520px;
}
ul.img_wp a {
    display:block;
}
ul.img_wp li {
    float:left;
}
ul.img_wp {
    width:10000px;
}
ol {
    display:inline-block;
    position:relative;
    bottom:45px;
    background-color:#ccc;
    padding:0px 3px 5px;
    border-radius:15px;
}
ol li {
    display:inline-block;
    width:14px;
    height:14px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
! function(window, document, $, undefined) {
    var $slideWp = $(".slide_wp"),
        imgSz = $slideWp.find("ul img").size(),
        liW = $slideWp.find("ul li").width(),
        curIdx = 0,
        timer,
        timer2;
    var init = function() {
        renderIdx();
        $slideWp.find("ul li").first().clone().appendTo($slideWp.find("ul"));
        initEvent();
        autoPlay();
    };
    var initEvent = function() {
        $slideWp.find(".handle_btn").click(onHandleBtnClk);
        $slideWp.hover(onMouseEnter, onMouseOut);
        $slideWp.find("ol li").hover(onMouseEnterIdx, onMouseOutIdx);
    };
    var onMouseOutIdx = function() {
        clearTimeout(timer2);
    };
    var onMouseEnterIdx = function() {
        var $this = $(this),
            curIdx = $this.index();
        timer2 = setTimeout(function() {
            $slideWp.find(".handle_btn").eq(1).trigger("click", curIdx);
        }, 300);
    };
    var onMouseOut = function() {
        autoPlay();
    };
    var onMouseEnter = function() {
        clearInterval(timer);
    };
    var onHandleBtnClk = function(e, data) {
        var $this = $(this),
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

! function(window, document, $, undefined) {
    var $slideWp = $(".slide_wp"),
        imgSz = $slideWp.find("ul img").size(),
        liW = $slideWp.find("ul li").width(),
        curIdx = 0,
        timer,
        timer2;

var init = function() {
        renderIdx();
        $slideWp.find("ul li").first().clone().appendTo($slideWp.find("ul"));
        initEvent();
        autoPlay();
    };

var initEvent = function() {
        $slideWp.find(".handle_btn").click(onHandleBtnClk);
        $slideWp.hover(onMouseEnter, onMouseOut);
        $slideWp.find("ol li").hover(onMouseEnterIdx, onMouseOutIdx);
    };

var onMouseOutIdx = function() {
        clearTimeout(timer2);
    };

var onMouseEnterIdx = function() {
        var $this = $(this),
            curIdx = $this.index();
        timer2 = setTimeout(function() {
            $slideWp.find(".handle_btn").eq(1).trigger("click", curIdx);
        }, 300);
    };

var onMouseOut = function() {
        autoPlay();
    };

var onMouseEnter = function() {
        clearInterval(timer);
    };

var onHandleBtnClk = function(e, data) {
        var $this = $(this),
            thisIdx = $slideWp.find(".handle_btn").index(this);
        data || data == 0 ? curIdx = data : (thisIdx ? curIdx++ : curIdx--);
        if (curIdx < 0) {
            $slideWp.find("ul").css("margin-left", liW * imgSz * -1);
            curIdx = imgSz - 1;
        }

if (curIdx > imgSz) {
            $slideWp.find("ul").css("margin-left", 0);
            curIdx = 1;
        }
        $slideWp.find("ul").stop().animate({
            marginLeft: liW * curIdx * -1
        });

$slideWp.find("ol li").eq(curIdx == imgSz ? 0 : curIdx).addClass("on").siblings(".on").removeClass(
            "on");
    };

var renderIdx = function() {
        var $olWp = $slideWp.find("ol"),
            lisArr = [];
        $.each(new Array(imgSz), function(i) {
            lisArr.push('<li class="', i ? "" : "on", '"></li>');
        });
        $olWp.html(lisArr.join(""));
    };

function autoPlay() {
        timer = setInterval(function() {
            $slideWp.find(".handle_btn").eq(1).click();
        }, 2000);
    }

init();
}(window, document, jQuery);

PROMULGATOR

马啼鸣玉

相关代码

图片轮播（原创）

最新