Awesome jQuery focus figure effect



jQuery  focus figure effect.
javascript


01$(function() {
02    var sWidth = $("#focus").width();
03    var len = $("#focus ul li").length;
04    var index = 0;
05    var picTimer;
06     
07    var btn = "<div class='btnBg'></div><div class='btn'>";
08    for(var i=0; i < len; i++) {
09        btn += "<span>" + (i+1) + "</span>";
10    }
11    btn += "</div>"
12    $("#focus").append(btn);
13    $("#focus .btnBg").css("opacity",0.5);
14     
15 
16    $("#focus .btn span").mouseenter(function() {
17        index = $("#focus .btn span").index(this);
18        showPics(index);
19    }).eq(0).trigger("mouseenter");
20 
21    $("#focus ul").css("width",sWidth * (len + 1));
22     
23    $("#focus ul li div").hover(function() {
24        $(this).siblings().css("opacity",0.7);
25    },function() {
26        $("#focus ul li div").css("opacity",1);
27    });
28     
29    $("#focus").hover(function() {
30        clearInterval(picTimer);
31    },function() {
32        picTimer = setInterval(function() {
33            if(index == len) {
34                showFirPic();
35                index = 0;
36            } else {
37                showPics(index);
38            }
39            index++;
40        },3000);
41    }).trigger("mouseleave");
42     
43    function showPics(index) {
44        var nowLeft = -index*sWidth;
45        $("#focus ul").stop(true,false).animate({"left":nowLeft},500);
46        $("#focus .btn span").removeClass("on").eq(index).addClass("on")
47    }
48     
49    function showFirPic() {
50        $("#focus ul").append($("#focus ul li:first").clone());
51        var nowLeft = -len*sWidth;
52        $("#focus ul").stop(true,false).animate({"left":nowLeft},500,function() {
53            $("#focus ul").css("left","0");
54            $("#focus ul li:last").remove();
55        });
56        $("#focus .btn span").removeClass("on").eq(0).addClass("on");
57    }
58});
html
01<div class="wrapper">
02    <h1>jQuery focus images</h1>
03 
04    <div id="focus">
05        <ul>
06            <li>
07                <div style="left:0; top:0; width:560px; height:380px;"><a href="#" target="_blank"><imgsrc="img/a01.jpg" alt="" /></a></div>
08 
09                <div style="right:0; top:0; width:220px; height:140px;"><a href="#" target="_blank"><imgsrc="img/a02.jpg" alt="" /></a></div>
10                <div style="right:0; top:140px; width:220px; height:140px;"><a href="#" target="_blank"><img src="img/a03.jpg" alt="" /></a></div>
11                <div style="right:0; bottom:0; width:220px; height:100px;"><a href="#" target="_blank"><img src="img/a04.jpg" alt="" /></a></div>
12            </li>
13             
14            <li>
15                <div style="left:0; top:0; width:780px; height:380px;"><a href="#" target="_blank"><imgsrc="img/b01.jpg" alt="" /></a></div>
16            </li>
17             
18            <li>
19                <div style="left:0; top:0; width:260px; height:210px;"><a href="#" target="_blank"><imgsrc="img/c01.jpg" alt="" /></a></div>
20 
21                <div style="left:260px; top:0; width:260px; height:210px;"><a href="#" target="_blank"><img src="img/c02.jpg" alt="" /></a></div>
22                <div style="left:0; top:210px; width:520px; height:170px;"><a href="#" target="_blank"><img src="img/c03.jpg" alt="" /></a></div>
23                <div style="right:0; top:0; width:260px; height:380px;"><a href="#" target="_blank"><imgsrc="img/c04.jpg" alt="" /></a></div>
24            </li>
25             
26            <li>
27                <div style="left:0; top:0; width:560px; height:380px;"><a href="#" target="_blank"><imgsrc="img/d01.jpg" alt="" /></a></div>
28                <div style="right:0; top:0; width:220px; height:140px;"><a href="#" target="_blank"><imgsrc="img/d02.jpg" alt="" /></a></div>
29                <div style="right:0; top:140px; width:220px; height:140px;"><a href="#" target="_blank"><img src="img/d03.jpg" alt="" /></a></div>
30                <div style="right:0; bottom:0; width:220px; height:100px;"><a href="#" target="_blank"><img src="img/d04.jpg" alt="" /></a></div>
31 
32            </li>
33             
34            <li>
35                <div style="left:0; top:0; width:780px; height:380px;"><a href="#" target="_blank"><imgsrc="img/e01.jpg" alt="" /></a></div>
36            </li>
37        </ul>
38    </div>
Labels: