焦点图
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>焦点图</title> 5 <style type="text/css"> 6 *{margin: 0px;padding: 0px;} 7 ul, dl{list-style: none;} 8 #mFocus{width: 500px;height: 300px;position: relative;overflow: hidden;} 9 #mFocus div{position: absolute;top: 0px;left: 0px;} 10 #mFocus img{width: 500px;height: 300px;} 11 #mFocus ul{position: absolute;left: 300px;top: 260px;} 12 #mFocus li{width: 30px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #666;background: #ff00ff;cursor: pointer;float: left;_display: none;} 13 #mFocus .on{background: #f60;} 14 #tip{display: none;} 15 </style> 16 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 17 <script type="text/javascript"> 18 (function ($) { 19 $.fn.mFocus = function (options) { 20 options = jQuery.extend({ 21 direction: "H", 22 step: -500 23 }, options); 24 25 var _this = $(this); 26 var num = 0; 27 var auto; 28 var mtop = 0; 29 var mlength = _this.find("img").length; 30 var total = parseInt((mlength - 1) * options.step); 31 32 function init() { 33 autoPlay(); 34 } 35 36 if (options.direction === "H") { 37 _this.find("div").css({ "width": -parseInt(mlength * options.step) + "px", "height": "300px","float":"left","_display":"inline" }); 38 } 39 else if (options.direction === "V") { 40 _this.find("div").css({ "width": "500px", "height": -parseInt(mlength * options.step) + "px" }); 41 } 42 43 44 45 $.each(_this.find("li"), function (k, v) { 46 $(this).click(function () { 47 if (options.direction === "H") { 48 _this.find("div").animate({ left: parseInt(options.step * k) + "px" }, 500); 49 } 50 else if (options.direction === "V") { 51 _this.find("div").animate({ top: parseInt(options.step * k) + "px" }, 500); 52 } 53 _this.find("li").removeClass("on"); 54 $(this).addClass("on"); 55 mtop += parseInt(options.step * k); 56 num = k; 57 }); 58 }); 59 60 function autoPlay() { 61 auto = setInterval(function () { 62 mtop += options.step; 63 if (mtop < total) { 64 mtop = 0; 65 } 66 num++; 67 if (num > 4) { 68 num = 0; 69 } 70 if (options.direction === "H") { 71 _this.find("div").animate({ left: mtop + "px" }, 500); 72 } 73 else if (options.direction === "V") { 74 _this.find("div").animate({ top: mtop + "px" }, 500); 75 } 76 _this.find("li").removeClass("on").eq(num).addClass("on"); 77 }, 3000); 78 } 79 80 _this.find("div").hover(function () { 81 clearInterval(auto); 82 }, function () { 83 autoPlay(); 84 }); 85 86 return init(); 87 } 88 })(jQuery); 89 </script> 90 <script type="text/javascript"> 91 $(function () { 92 $("#mFocus").mFocus(); 93 }); 94 </script> 95 </head> 96 <body> 97 <div id="mFocus"> 98 <div> 99 <img alt="" src="1.jpg" /> 100 <img alt="" src="2.jpg" /> 101 <img alt="" src="3.jpg" /> 102 <img alt="" src="4.jpg" /> 103 <img alt="" src="5.jpg" /> 104 </div> 105 <ul> 106 <li class="on">1</li> 107 <li>2</li> 108 <li>3</li> 109 <li>4</li> 110 <li>5</li> 111 </ul> 112 </div> 113 </body> 114 </html>
焦点图jQuery的实现方法如下：
(function ($) {
$.fn.mFocus = function (options) {
options = jQuery.extend({
direction: "H", //水平或垂直参数，H：水平，V：垂直
step: -500 //步长为负数 水平时图片的宽长度的负数 垂直时图片的高的长度的负数
}, options);
var _this = $(this); //指向obj
var num = 0; //当前第几个的位置
var auto; //设置自动的开关
var mtop = 0; //div高度的数值
var mlength = _this.find("img").length; //图片个数
var total = parseInt((mlength - 1) * options.step); //高度
//初始化
function init() {
autoPlay();
}
//设置div
if (options.direction === "H") {
_this.find("div").css({ "width": -parseInt(mlength * options.step) + "px", "height": "300px","float":"left","_display":"inline" });
}
else if (options.direction === "V") {
_this.find("div").css({ "width": "500px", "height": -parseInt(mlength * options.step) + "px" });
}
//设置li按钮
$.each(_this.find("li"), function (k, v) {
$(this).click(function () {
if (options.direction === "H") {
_this.find("div").animate({ left: parseInt(options.step * k) + "px" }, 500);
}
else if (options.direction === "V") {
_this.find("div").animate({ top: parseInt(options.step * k) + "px" }, 500);
}
_this.find("li").removeClass("on");
$(this).addClass("on");
mtop += parseInt(options.step * k);
num = k;
});
});
//设置自动
function autoPlay() {
auto = setInterval(function () {
mtop += options.step;
if (mtop < total) {
mtop = 0;
}
num++;
if (num > 4) {
num = 0;
}
if (options.direction === "H") {
_this.find("div").animate({ left: mtop + "px" }, 500);
}
else if (options.direction === "V") {
_this.find("div").animate({ top: mtop + "px" }, 500);
}
_this.find("li").removeClass("on").eq(num).addClass("on");
}, 3000);
}
//鼠标在图片停止，离开继续播放
_this.find("div").hover(function () {
clearInterval(auto);
}, function () {
autoPlay();
});
return init();
}
})(jQuery);
