console
$.fn.prepare_slider = function(){
var x_pos = 0;
var li_items_n = 0;
var right_clicks = 0;
var left_clicks = 0;
var li_col = $("#slider_list > li");
var li_width = li_col.outerWidth(true);
var viewWindow = Math.round($('.block-slider').width()/li_width);
li_col.each(function(index){
x_pos += $(this).outerWidth(true);
li_items_n++;
})
right_clicks = li_items_n - viewWindow;
total_clicks = li_items_n - viewWindow;
$('#slider_list').css('position','relative');
$('#slider_list').css('left','0px');
$('#slider_list').css('width', x_pos+'px');
var is_playing = false;
var completed = function() { is_playing = false; }
$('#left_but').click( function(){
cur_offset = $('#slider_list').position().left;
if (!is_playing){
if (left_clicks > 0) {
is_playing = true; $('#slider_list').animate({'left': cur_offset + li_width + 'px'}, 700, "linear", completed);
right_clicks++;
left_clicks--;
}
else {
is_playing = true;
$('#slider_list').animate({'left': -li_width*total_clicks + 'px'}, 700, "linear", completed);
right_clicks = 0;
left_clicks = total_clicks;
}
}
});
$('#right_but').click( function(){
if (!is_playing){
cur_offset = $('#slider_list').position().left;
if (right_clicks > 0) {
is_playing = true;
$('#slider_list').animate({'left': cur_offset - li_width + 'px'},700, "linear", completed );
right_clicks--; left_clicks++;
}
else {
is_playing = true; $('#slider_list').animate({'left': 0 + 'px'},700, "linear", completed );
left_clicks = 0;
right_clicks = total_clicks;
}
}
});
}
$.fn.over = function(){
$(this).hover(
function () {
$(this).addClass("over");
},
function () {
$(this).removeClass("over");
}
);
}
$(function(){
$().prepare_slider();
$('#slider_list > li').over();
//=======intro================
var slider_link = $('#right_but');
var slider_link_index = 1;
var slider_count = $('#slider_list > li').size();
var time_prepare_slider = null;
function slider_intro(){
slider_link.trigger('click');
slider_link_index++;
time_prepare_slider = setTimeout(function(){slider_intro()}, 1000); //select change time
}
time_prepare_slider = setTimeout(function(){slider_intro()}, 1000);
$('#left_but').hover(
function () {
clearTimeout(time_prepare_slider);
},
function () {
time_prepare_slider = setTimeout(function(){slider_intro()}, 1000);
}
);
$('#right_but').hover(
function () {
clearTimeout(time_prepare_slider);
},
function () {
time_prepare_slider = setTimeout(function(){slider_intro()}, 1000);
}
);
});
<div class="cms-home">
<div class="indent-col-main">
<div class="block-slider">
<div class="anythingSlider">
<ul id="slider_list" class="products-grid">
<li class="item">
<a class=product-image title="Lorem ipsum dolor sit" href="#">
<img alt="Lorem ipsum dolor sit" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod.jpg" width=170 height=257>
</a>
</li>
<li class=item>
<a class=product-image title="Lorem ipsum dolor sit 2" href="#">
<img alt="Lorem ipsum dolor sit 2" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_2.jpg" width=170 height=257>
</a>
</li>
<li class=item>
<a class=product-image title="Lorem ipsum dolor sit 4" href="#">
<img alt="Lorem ipsum dolor sit 4" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_3.jpg" width=170 height=257>
</a>
</li>
<li class=item>
<a class=product-image title="Lorem ipsum dolor sit 8" href="#">
<img alt="Lorem ipsum dolor sit 8" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_4.jpg" width=170 height=257>
</a>
</li>
<li class=item>
<a class=product-image title="Lorem ipsum dolor sit 7" href="#">
<img alt="Lorem ipsum dolor sit 7" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_5.jpg" width=170 height=257>
</a>
</li>
<li class="item">
<a class=product-image title="Lorem ipsum dolor sit" href="#">
<img alt="Lorem ipsum dolor sit" src="http://www.jq22.com/demo/jquery-huadong20150805/images/prod_3.jpg" width=170 height=257>
</a>
</li>
</ul>
</div>
</div>
<a id=left_but class="box-left"><i></i></a>
<a id=right_but class="box-right"><i></i></a>
</div>
</div>
.cms-home .indent-col-main { position: relative; padding-left: 35px; padding-right: 35px; width: 930px; margin: 0px auto; }
.cms-home .block-slider { position: relative;width: 930px; overflow: hidden; }
.cms-home .block-slider ul {list-style-type: none; margin: 0px;padding: 0; height: 90px; overflow: hidden;position: relative;}
.cms-home .block-slider li.item { position: relative; text-align: center; margin: 0px; width: 235px; float: left; height: 90px; display: block;}
.cms-home .block-slider .product-image { margin: 0px auto; width: 235px; display: block; height: 90px;text-decoration: none }
.cms-home img {width: 225px;height: 90px;margin-right: 10px;border: none;}
.cms-home .products-grid:after { line-height: 0; display: block; height: 0px; clear: both; font-size: 0px; overflow: hidden; content: "." }
.cms-home .box-left,.cms-home .box-right {position: absolute;z-index: 999; margin: 0px; width: 25px;height: 90px;top: 0px; cursor: pointer;background:#d2d2d2;}
.cms-home .box-left{left: 0px;}
.cms-home .box-right{right: 0px }
.cms-home .box-left i,.cms-home .box-right i{background:#d2d2d2 url(http://oboiylrjj.bkt.clouddn.com/prevnext.png) no-repeat scroll 0 0;display: inline-block;height: 17px;margin-top: 36.5px;width: 10px;margin-left: 7.5px;}
.cms-home .box-right i{background-position: 0 -28px;}
.cms-home .box-left:hover,.cms-home .box-right:hover{background:#2f8bcd;}
.cms-home .box-left:hover i,.cms-home .box-right:hover i{background-color: #2f8bcd;}