jfz轮播1

jfz轮播1

JFZ_Slider/css/JFZ_Slider.css

@@ -0,0 +1,54 @@
+/*轮播样式*/
+.JFZ_Slider{
+	border: 1px solid #AAA;
+	width: 586px;
+	height: 150px;
+	overflow: hidden;
+	position: relative;
+
+}
+.JFZ_Slider ul {
+	position: absolute;
+}
+.JFZ_Slider ul li {
+	width: 586px;
+	height: 150px;
+	display: none;
+}
+
+.JFZ_Slider .num {
+	position: absolute;
+	right:5px;
+	bottom:5px;
+}
+
+.JFZ_Slider .num li{
+	display:inline-block;
+	float: left;
+	color: #FF7300;
+	text-align: center;
+	line-height: 16px;
+	width: 16px;
+	height: 16px;
+	font-family: Arial;
+	font-size: 12px;
+	cursor: pointer;
+	overflow: hidden;
+	margin: 3px 1px;
+	border: 1px solid #FF7300;
+	background-color: #fff;
+	*display:inline;
+	*zoom:1;
+}
+
+.JFZ_Slider .num li.on{
+	color: #fff;
+	line-height: 21px;
+	width: 21px;
+	height: 21px;
+	font-size: 16px;
+	margin: 0 1px;
+	border: 0;
+	background-color: #FF7300;
+	font-weight: bold;
+}

JFZ_Slider/css/cssreset.css

@@ -0,0 +1,57 @@
+/*
+  重置浏览器的默认样式
+ */
+html {
+	color: #000;
+	background: #FFF
+}
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
+	margin: 0;
+	padding: 0
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0
+}
+fieldset, img {
+	border: 0
+}
+address, caption, cite, code, dfn, em, strong, th, var {
+	font-style: normal;
+	font-weight: normal
+}
+ol, ul {
+	list-style: none
+}
+caption, th {
+	text-align: left
+}
+h1, h2, h3, h4, h5, h6 {
+	font-size: 100%;
+	font-weight: normal
+}
+q:before, q:after {
+	content: ''
+}
+abbr, acronym {
+	border: 0;
+	font-variant: normal
+}
+sup {
+	vertical-align: text-top
+}
+sub {
+	vertical-align: text-bottom
+}
+input, textarea, select {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit
+}
+input, textarea, select {
+	*font-size: 100%
+}
+legend {
+	color: #000
+}
+

JFZ_Slider/js/JFZ_Slider.js

@@ -0,0 +1,57 @@
+
+;(function($){
+
+	$.fn.jfz_slider = function(){
+
+		var $plugin = this;
+			$ul_cnt = $plugin.find("ul.slider_cnt"),
+			$lis = $ul_cnt.find("li"),
+			len = $lis.length;
+
+		var ul_root = "<ul class='num'>",
+			$ul_num = null,
+			$li_num = null;
+
+		for(var i = 0; i < len; i++){
+			ul_root += "<li>"+(i+1)+"</li>" 
+		}
+
+		ul_root += "</ul>";
+		$plugin.append(ul_root);
+		$ul_num = $plugin.find("ul.num");
+		$li_num = $ul_num.find("li");
+
+		return this.each(function(){
+
+			var index = 0,
+				Timer = null;
+
+			$lis.eq(index).show();
+			$li_num.eq(index).addClass("on");
+
+			$li_num.bind('mouseover',function(){
+				index = $li_num.index(this);
+				showImg(index);
+			});
+
+			$plugin.hover(function(){
+				clearInterval(Timer);
+			},function(){
+				Timer = setInterval(function(){
+					showImg(index);
+					index++;
+
+					if(index == len)
+						index = 0;
+				},3000);
+			}).trigger("mouseleave");	
+
+		});	
+
+		function showImg(index){
+			$lis.eq(index).show().siblings().hide();
+			$li_num.removeClass("on").eq(index).addClass("on");
+		}
+	}
+
+})(jQuery);