网页前端代码存档 - 【第一期】新闻推荐切换的特效代码

不知不觉做前端技术也有好多个年头了，不知道自己还能做多久，之前有个同行的朋友坚持用写博客的形式记录自己曾经写过用过的各种代码，我开始是不以为然的态度，但是多年之后我在回首去看他的博客，确实震撼到我了，多年积累的技术心得和很多有用的代码保存了下来，真的看到了技术的点点滴滴，我个人这些年的工作也保存了很多，但是就是因为很多之前使用非常熟练的东西，时间长不用了在减起来就吃的没有之前那么透，所以，从今天开始我也把我自己多年珍藏的一些技术代码写下来，存下来，也激励一下自己，看自己能够坚持多长时间，在回首不会后悔...                           

  

                                                                                                                                                                                                                                 东北-长春那嘎达一搬砖小小子儿

【第一期】新闻推荐切换的特效代码

1.首先页面引用js代码

<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script>
function scrollNews(selector,Entry,time,StartIndex)
{
var _self=this;
this.Selector=selector;
this.Entry=Entry;
this.time = time;
this.i=StartIndex||0;
this.Count=$(this.Selector+" ul li").length;
$(this.Selector+" ul li").hide();//全部隐藏
$(this.Selector+" ul li").eq(this.i).show();//第i个显示
$(this.Selector).bind("mouseenter",function(){
    if(_self.sI){clearInterval(_self.sI);}
}).bind("mouseleave",function(){
_self.showIndex(_self.i++);
})
/*生成激活OL项目*/
for(var j=0;j<this.Count;j++)
$(this.Selector+" .activeOL").append('<li><a οnclick="'+this.Entry+'.showIndex('+j+');" href="#"><img src="images/crystal.gif"></a></li>');
$(this.Selector+" ol li a").eq(this.i).addClass("active");
this.sI=setInterval(this.Entry+".showIndex(null)",this.time);

this.GetSelector=function(){return this.Selector;}
this.showIndex=function(index)
{
this.i++;//显示下一个
if(this.sI){clearInterval(this.sI);}
this.sI=setInterval(this.Entry+".showIndex()",this.time);
if (index!=null)
{
this.i=index;
}
if(this.i==this.Count)
this.i=0;
$(this.Selector+" ul li").hide();
$(this.Selector+" ul li").eq(this.i).slideDown();
$(this.Selector+" ol li a").removeClass("active");
$(this.Selector+" ol li a").eq(this.i).addClass("active");
}
}
/**
// 参数1：ID    
// 参数2：实例化对象的名称（跟var 后的相同）
// 参数3：间隔时间      
// 参数4：初始化时，默认哪个先显示
**/
var s=new scrollNews("#haha1","s", 1000 , 3);
var s2=new scrollNews("#haha2","s2"  , 2000);
var haha3=new scrollNews("#haha3","haha3"  , 3000 , 1);
</script>

2.页面部分代码

<div class="news" id="haha1">
<ul>
<li>
<span>2017-09-22</span>
<a href="#">
在吉林长春做网站啊啊啊啊,试试不好吗？
</a>
</li>
<li>
<span>2017-09-21</span>
<a href="#">
在吉林长春电子商务行业赚钱吗？
</a>
</li>
<li>
<span>2017-09-20</span>
<a href="#">
在吉林长春微信营销如何圈粉呢？
</a>
</li>
<li>
<span>2017-09-21</span>
<a href="#">
在吉林长春电子商务行业赚钱吗？
</a>
</li>
<li>
<span>2017-09-20</span>
<a href="#">
在吉林长春微信营销如何圈粉呢？
</a>
</li>
</ul>
<ol class="activeOL"></ol>
</div>




<div class="news" id="haha2">
<ul>
<li>
<span>2017-09-22</span>
<a href="#">
在吉林长春做网站啊啊啊啊,试试不好吗？
</a>
</li>
<li>
<span>2017-09-21</span>
<a href="#">
在吉林长春电子商务行业赚钱吗？
</a>
</li>
<li>
<span>2017-09-21</span>
<a href="#">
在吉林长春微信营销如何圈粉呢？
</a>
</li>
<li>
<span>2017-09-20</span>
<a href="#">
在吉林长春电子商务行业赚钱吗？
</a>
</li>
</ul>
<ol class="activeOL"></ol>
</div>





<div class="news" id="haha3">
<ul>
<li>
<span>2017-09-22</span>
<a href="#">
在吉林长春做网站啊啊啊啊,试试不好吗？
</a>
</li>
<li>
<span>2017-09-21</span>
<a href="#">
在吉林长春电子商务行业赚钱吗？
</a>
</li>
<li>
<span>2017-09-20</span>
<a href="#">
在吉林长春微信营销如何圈粉呢？
</a>
</li>
</ul>
<ol class="activeOL"></ol>
</div>

3.样式表加上，可以根据自己样式需要修改，这仅仅是抛钻引钰而已

.news {CLEAR: both; BACKGROUND: url(../images/news_bg.gif); WIDTH: 672px; ColOR: #fff; HEIGHT: 26px}
.news ul {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; liNE-HEIGHT: 26px; PADDING-TOP: 0px; liST-STYLE-TYPE: none; HEIGHT: 26px}
.news ul li {MARGIN: 0px 0px 0px 1em; text-align:left;}
.news ul li.active {DISPLAY: block}
.news span {BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0.75em; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0.75em 0px 0px; PADDING-TOP: 0px}
.news ul A {ColOR: #fff; TEXT-DECORATION: none}
.news ul A:hover {TEXT-DECORATION: underline}
.news ol {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: -19px 8px 0px 0px; PADDING-TOP: 0px; liST-STYLE-TYPE: none}
.news ol li {DISPLAY: inline; MARGIN: 0px 0px 0px 3px; width:10px;}
.news ol li A {BACKGROUND: url(../images/switcher.gif) 0px -10px}
.news ol li A:hover {BACKGROUND: url(../images/switcher.gif) 0px 10px}
.news ol li A.active {BACKGROUND: url(../images/switcher.gif) 0px 0px}
.news ol li A.active:hover {BACKGROUND: url(../images/switcher.gif) 0px 0px}

4.完事了，第一期记录完毕，完整代码存网盘了，名称一样，留个记录，哈哈哈哈,,,,, 自我陶醉中....