html+css+jQuery左右弹性焦点图滚动
1、新建html文档。
2、书写hmtl代码。
<div class="xixi">
<div class="bx_container">
<ul id="example1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55565</li>
<li>66666</li>
<li>77777</li>
<li>88888</li>
</ul>
</div>
</div>
3、书写并添加js代码。
<script>
(function($) {
$.fn.bxCarousel = function(options) {
var defaults = {
move: 4,
display_num: 4,
speed: 500,
margin: 0,
auto: false,
auto_interval: 200,
auto_dir: 'next',
auto_hover: false,
next_text: 'next',
next_image: '',
prev_text: 'prev',
prev_image: '',
controls: true
};
var options = $.extend(defaults, options);
return this.each(function() {
var $this = $(this);
var li = $this.find('li');
var first = 0;
var fe = 0;
var last = options.display_num - 1;
var le = options.display_num - 1;
var is_working = false;
var j = '';
var clicked = false;
li.css({
'float': 'left',
'listStyle': 'none',
'marginRight': options.margin
});
var ow = li.outerWidth(true);
wrap_width = (ow * options.display_num) - options.margin;
var seg = ow * options.move;
$this.wrap('<div class="bx_container"></div>').width(999999);
if (options.controls) {
if (options.next_image != '' || options.prev_image != '') {
var controls = '<a href="" class="prev"><img src="' + options.prev_image + '"></a><a href="" class="next"><img src="' + options.next_image + '"></a>';
}
else {
var controls = '<a href="" class="prev">' + options.prev_text + '</a><a href="" class="next">' + options.next_text + '</a>';
}
}
$this.parent('.bx_container').wrap('<div class="bx_wrap"></div>').css({
'position': 'relative',
'width': wrap_width,
'overflow': 'hidden'
}).before(controls);
var w = li.slice(0, options.display_num).clone();
var last_appended = (options.display_num + options.move) - 1;
$this.empty().append(w);
get_p();
get_a();
$this.css({
'position': 'relative',
'left': -(seg)
});
$this.parent().siblings('.next').click(function() {
slide_next();
clearInterval(j);
clicked = true;
return false;
});
$this.parent().siblings('.prev').click(function() {
slide_prev();
clearInterval(j);
clicked = true;
return false;
});
/*新增 START*/
$this.mouseover(function(e){
if(is_working){
return false;
}
var e = e || event;
var fobj = e.target || e.srcElement;
if(fobj.tagName == 'LI'){
var i = $(fobj).index();
if(i == 7){
//这是第4个li
$(this).stop().animate({'left':-(ow+seg-options.margin)},options.speed);
}else{
//这是第1、2、3个li
$(this).stop().animate({'left':-seg},options.speed);
}
$(fobj).addClass('active').stop().animate({'width':2*(ow-options.margin)},options.speed).siblings('.active').removeClass('active').stop().animate({'width':ow-options.margin},options.speed);
}
});
$this.mouseout(function(e){
//归位
if(is_working){
return false;
}
$(this).stop().animate({'left':-seg},options.speed);
$(this).find('.active').removeClass('active').stop().animate({'width':ow-options.margin},options.speed);
});
/*新增 END*/
if (options.auto) {
start_slide();
if (options.auto_hover && clicked != true) {
$this.find('li').live('mouseenter',
function() {
if (!clicked) {
clearInterval(j);
}
});
$this.find('li').live('mouseleave',
function() {
if (!clicked) {
start_slide();
}
});
}
}
function start_slide() {
if (options.auto_dir == 'next') {
j = setInterval(function() {
slide_next()
},
options.auto_interval);
} else {
j = setInterval(function() {
slide_prev()
},
options.auto_interval);
}
}
function slide_next() {
if (!is_working) {
is_working = true;
set_pos('next');
$this.animate({
left: '-=' + seg
},
options.speed,
function() {
$this.find('li').slice(0, options.move).remove();
$this.css('left', -(seg));
get_a();
is_working = false;
});
}
}
function slide_prev() {
if (!is_working) {
is_working = true;
set_pos('prev');
$this.animate({
left: '+=' + seg
},
options.speed,
function() {
$this.find('li').slice( - options.move).remove();
$this.css('left', -(seg));
get_p();
is_working = false;
});
}
}
function get_a() {
var str = new Array();
var lix = li.clone();
le = last;
for (i = 0; i < options.move; i++) {
le++
if (lix[le] != undefined) {
str[i] = $(lix[le]);
} else {
le = 0;
str[i] = $(lix[le]);
}
}
$.each(str,
function(index) {
$this.append(str[index][0]);
});
}
function get_p() {
var str = new Array();
var lix = li.clone();
fe = first;
for (i = 0; i < options.move; i++) {
fe--
if (lix[fe] != undefined) {
str[i] = $(lix[fe]);
} else {
fe = li.length - 1;
str[i] = $(lix[fe]);
}
}
$.each(str,
function(index) {
$this.prepend(str[index][0]);
});
}
function set_pos(dir) {
if (dir == 'next') {
first += options.move;
if (first >= li.length) {
first = first % li.length;
}
last += options.move;
if (last >= li.length) {
last = last % li.length;
}
} else if (dir == 'prev') {
first -= options.move;
if (first < 0) {
first = li.length + first;
}
last -= options.move;
if (last < 0) {
last = li.length + last;
}
}
}
});
}
})(jQuery);
</script>
<script>
$(document).ready(function(){
$('#example1').bxCarousel({
display_num: 4,
move:4,
margin:5,
auto: false
});
});
</script>
4、书写css代码。
<style>
*{margin:0;padding:0}
.xixi {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bx_container{width:663px; height:364px; position:relative;}
.bx_container ul li{width:162px; height:364px; line-height:364px; float:left; overflow:hidden; cursor:pointer; background:#FC3;text-align:center}
.bx_container ul li img{width:162px; height:364px;}
.bx_wrap .prev,.bx_wrap .next{width:27px; height:51px; outline-style:none;outline-width:0;position:absolute; top:160px; z-index:111;}
.bx_wrap a.prev{background:#FC6; left:-60px;}
.bx_wrap a.next{background:#FC3; right:-60px;}
</style>
5、代码整体结构。
6、查看效果。
