jQuery插件一之新闻轮播

原来写的一个新闻滚动模块的jQuery小插件。

具体实现思路

• 写页面html和css样式
• 初始化滚动模块
• 根据实际项目情况的滚动方向，重新定位每一个滚动dom
• 创建轮播，关键节点进行分个控制
• 增加鼠标hover滚动停止的事件

html

<script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script><div class="wrap">	<ul>		<li>1.This is the first news ! </li>		<li>2.This is the second news ! </li>		<li>3.This is the third news ! </li>		<li>4.This is the forth news ! </li>		<li>5.This is the fifth news ! </li>		<li>6.This is the sixth news ! </li>		<li>7.This is the seventh news ! </li>		<li>8.This is the eighth news ! </li>		<li>9.This is the ninth news ! </li>		<li>10.This is the tenth news ! </li>		<li>11.This is the eleventh news ! </li>	</ul></div>

css

*{margin: 0;padding: 0;}li{list-style: none;}a{text-decoration: none;}body{text-align: center;}.wrap,.wrap1{overflow: hidden;margin: 0 auto;height: 400px;width: 300px;border: 1px solid #cfe4d2;}.wrap ul,.wrap1 ul{height: 100%;width: 100%;position: relative;}.wrap ul li,.wrap1 ul li{text-align: left;font-family:'Comic Sans MS', cursive, sans-serif;cursor: pointer;height: 40px;width: 90%;margin-left:5%;line-height: 40px;border-bottom: 1px dashed #a1de66;position: absolute;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.wrap ul li:hover{color: #A1DE66;text-decoration: underline;}button{transition: all .1s linear;width: 75px;height: 30px;border-radius: 15px;background: #FF7F50;color: #ffffff;cursor: pointer;margin-top: 20px;outline: none;border: 1px solid #FF7F50;}button:hover{background: #FFFFFF;color: #FF7F50;}

js

//调用方法，默认向上滚动$(".wrap1").newsLoop("top");//轮播默认为从下往上动画//如果默认情况需要修改     传入参数进行//left、、top、bottom、right四个参数进行修改方向$.fn.newsLoop= function(dir){	var w_h;	switch (dir){		case "right":			w_h= "width";			break;		case "left":			w_h= "width";			break;		default:			w_h= "height";			break;	}	var newsT;	var wrap_H= parseInt(this.css(w_h));	var lis= this.children("ul").children("li");	var li_H= parseInt(lis.css(w_h));	//初始化所有li的位置	for(var i= 0; i< lis.length; i++){		lis.eq(i).css(dir,li_H*i +"px");	}	var last_li= parseInt(lis.eq(lis.length-1).css(dir));	//建立轮播规则	function Loop(){		lis.each(function(){			var this_T= parseInt($(this).css(dir));			this_T > -li_H ? this_T-- : this_T = last_li;			$(this).css(dir, this_T+"px");		})	}	//开始轮播	newsT= setInterval(Loop,1000/60);	//绑定hover事件	this.hover(function(){		clearInterval(newsT);	},function(){		newsT= setInterval(Loop,1000/60);	})}

小结

这里主要使用到的就是 $.fn.Func 方法为jQuery增加新插件的功能，不得不佩服jQuery的开发人员，这个方法从理论上赋予了jQuery无限的扩展性。
然后是each()方法的使用和定时器setInterval的使用。
这个插件下完后就没有动过，所以里面如果增加随时点击随时切换部分还没有做，如果有需要的话可以自行更改。