<div class="slider_box">
<div class="slider_nav">
<div class="nav_box">
<a class="active" href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
</div>
</div>
<a href="javascript:void(0)" class="nav slider_left"></a>
<div class="pic_box clearfix">
<ul class="slider_list">
<li>
<div class="slider_li_box clearfix">
<div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
<div class="slider_content">
<h2 class="micro">1111个股启动前精准捕获，亚历山大择时组合策略逆市大幅获利</h2>
<p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念，例如选定一篇报道后，可以查看随时间推移的视频，表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
</div>
</div>
</li>
<li>
<div class="slider_li_box clearfix">
<div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
<div class="slider_content">
<h2 class="micro">2222个股启动前精准捕获，亚历山大择时组合策略逆市大幅获利</h2>
<p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念，例如选定一篇报道后，可以查看随时间推移的视频，表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
</div>
</div>
</li>
<li>
<div class="slider_li_box clearfix">
<div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
<div class="slider_content">
<h2 class="micro">3333个股启动前精准捕获，亚历山大择时组合策略逆市大幅获利</h2>
<p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念，例如选定一篇报道后，可以查看随时间推移的视频，表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
</div>
</div>
</li>
<li>
<div class="slider_li_box clearfix">
<div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
<div class="slider_content">
<h2 class="micro">444个股启动前精准捕获，亚历山大择时组合策略逆市大幅获利</h2>
<p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念，例如选定一篇报道后，可以查看随时间推移的视频，表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
</div>
</div>
</li>
<li>
<div class="slider_li_box clearfix">
<div class="slider_picbox"><img src="images/temp/slider1.jpg" width="198" height="148"/></div>
<div class="slider_content">
<h2 class="micro"><a href="#">555个股启动前精准捕获，亚历山大择时组合策略逆市大幅获利</a></h2>
<p>“病毒化内容的识别和可视化”技术展示提出了一种社会媒体病毒化的量化理念，例如选定一篇报道后，可以查看随时间推移的视频，表明该报道是如何从一个用户传播识别出这个过程中哪些用户具....</p>
</div>
</div>
</li>
</ul>
</div>
<a href="javascript:void(0)" class="nav slider_right"></a>
</div>
(function($){
$.fn.slider = function(options){
var defaults = {
speed : 800,
otime : 3000,
autoplay : true
}
var options = $.extend(defaults, options);
this.each(function(){
var oNav_box = $(this).find(".nav_box a");
var oArrow = $(this).find("a.nav");
var oLeft = $(this).find("a.slider_left");
var oRight = $(this).find("a.slider_right");
var oNav = $(this).find(".slider_nav a");
var oindex = 0;
var oBox = $(this).find(".slider_list");
var oLi = oBox.find("li");
var oLi_width = oLi.width();
var olen = oLi.length;
/*箭头点击方法*/
oArrow.bind('click', function() {
oindex = ($(this).hasClass('slider_right')==true)
? oindex+1 : oindex-1;
manageNav(oindex);
navplay(oindex);
clearInterval(scrollTimmer);
moveSlide();
});
/*索引处理方法*/
var changePosition = function() {
if(oindex == olen - 1) {
oindex = 0;
manageNav(oindex);
navplay(oindex);
} else {
oindex++;
manageNav(oindex);
navplay(oindex);
}
moveSlide();
}
/*箭头显示和隐藏*/
var manageNav = function(position) {
if(position==0)
{
oLeft.hide()
}
else {
oLeft.show()
}
if(position==olen-1)
{
oRight.hide()
}
else {
oRight.show()
}
}
manageNav(oindex);
/*索引添加样式*/
var navplay = function(i){
oNav_box.removeClass("active").eq(i).addClass("active");
}
/*索引控制*/
oNav.each(function(k){
$(this).bind('click',function(k){
oindex = $(this).index();
manageNav(oindex);
navplay(oindex);
moveSlide();
});
});
/*滚动函数*/
function moveSlide() {
oBox.animate({'marginLeft' : oLi_width*(-oindex)},options.speed);
}
if(options.autoplay){
scrollTimmer = setInterval(changePosition, options.otime);
$(this).hover(function(){
clearInterval(scrollTimmer);
},function(){
scrollTimmer = setInterval(changePosition,options.otime);
});
}
})
};
})(jQuery);
