【摘要】 左右切换js考必过小编为大家整理了关于左右切换js的信息，希望可以帮助到大家！
左右切换js
标签：lse jquery poi aci max val ima ext css
(function($) {
$.fn.extend({
slider: function(options) {
var settings = $.extend({
speed: 500
},
options);
return this.each(function() {
var slidercontents = $(this).addClass(‘image-slider-contents‘);
var slider = $(‘<p/>‘).addClass(‘image-slider‘).attr(‘id‘, slidercontents.attr(‘id‘));
var backbutton = $(‘<p/>‘).addClass(‘image-slider-back‘);
var forwardbutton = $(‘<p/>‘).addClass(‘image-slider-forward‘);
slidercontents.removeAttr(‘id‘);
slidercontents.before(slider);
slider.append(backbutton);
slider.append(slidercontents);
slider.append(forwardbutton);
var total = $(‘> p‘, slidercontents).length;
var left = 0;
var w;
var width;
var maxScroll;
slider.append($(‘<p/>‘).css(‘display‘, ‘none‘).addClass(‘preview‘).append($(‘<p/>‘).addClass(‘img-large‘)
.append($(‘<p/>‘).html(‘ ‘).click(function(e) {
e.stopPropagation();
e.stopImmediatePropagation();
//display previous image
var img = $(this).parent().find(‘img‘);
var index = parseInt(img.attr(‘class‘));
img.removeAttr(‘class‘);
if (index > 1) {
index--;
var src = $(‘.‘ + index + ‘ p img‘).attr(‘src‘);
var txt = $(‘.‘ + index + ‘ p a‘).html();
$(‘.preview‘).find(‘.label‘).html(txt);
$(‘.preview‘).find(‘img‘).addClass(‘‘ + (index) + ‘‘).css(‘opacity‘, ‘0‘).attr(‘src‘, src).stop(false, true).animate({
opacity: 1
},
1000);
}
else
$(‘.preview‘).find(‘img‘).addClass(‘‘ + (index) + ‘‘);
}).addClass(‘left‘).css(‘opacity‘, ‘0.5‘).hover(function() {
$(this).css(‘opacity‘, ‘1‘)
},
function() {
$(this).css(‘opacity‘, ‘0.5‘)
}))
.append($(‘<p/>‘).html(‘ ‘).click(function(e) {
e.stopPropagation();
e.stopImmediatePropagation();
//display next image
var img = $(this).parent().find(‘img‘);
var index = parseInt(img.attr(‘class‘));
img.removeAttr(‘class‘);
if (index < total) {
index++;
var src = $(‘.‘ + index + ‘ p img‘).attr(‘src‘);
var txt = $(‘.‘ + index + ‘ p a‘).html();
$(‘.preview‘).find(‘.label‘).html(txt);
$(‘.preview‘).find(‘img‘).addClass(‘‘ + (index) + ‘‘).css(‘opacity‘, ‘0‘).attr(‘src‘, src).stop(false, true).animate({
opacity: 1
},
1000);
}
else
$(‘.preview‘).find(‘img‘).addClass(‘‘ + (index) + ‘‘)
}).addClass(‘right‘).css(‘opacity‘, ‘0.5‘).hover(function() {
$(this).css(‘opacity‘, ‘1‘)
},
function() {
$(this).css(‘opacity‘, ‘0.5‘)
}))
.append($(‘<img/>‘))).append($(‘<p/>‘).addClass(‘label‘).css(‘opacity‘, ‘0.8‘))
.append($(‘<p/>‘).addClass(‘close‘).click(function(e) {
$(this).parent().fadeOut("slow");
})));
$(document).click(function(e) {
if ($(‘.preview‘).css(‘display‘) == ‘block‘)
$(‘.preview‘).fadeOut("slow");
});
function initialize() {
var tempElements = $(‘> p‘, slidercontents);
var allElements = new Array();
tempElements.each(function(index, el) {
allElements.push($(‘<p/>‘).addClass(‘‘ + (index + 1) + ‘‘).addClass(‘outer‘).append(el));
});
allElements = $(allElements);
$(‘> p‘, slidercontents).remove();
var wrapper = $(‘<p/>‘).addClass(‘contents-wrapper‘);
allElements.each(function(index, el) {
wrapper.append($(el));
});
slidercontents.append(wrapper);
var w = $(‘.outer:eq(0)‘, slidercontents).outerWidth() + parseFloat($(‘.outer:eq(0)‘, slidercontents).css(‘margin-left‘)) + parseFloat($(‘.outer:eq(0)‘, slidercontents).css(‘margin-right‘));
var width = (total + 1) * w;
var maxScroll = width - $(‘.image-slider-contents‘).outerWidth();
wrapper.css({
width: width
});
$(‘> p > p‘, slidercontents).css(‘display‘, ‘‘);
$(‘.outer‘, slidercontents).each(function(index) {
$(this).prepend($(‘<img/>‘).attr(‘src‘, ‘images/zoom.png‘).addClass(‘zoom‘)
.css({
cursor: ‘pointer‘,
‘position‘: ‘absolute‘,
‘float‘: ‘right‘,
right:-10,
top: -12,
width: 34,
height: 32
}));
/* 酷站代码整理 http://www.5icool.org */
});
$(‘.outer a‘).click(function(e) {
e.stopPropagation();
e.stopImmediatePropagation();
});
$(‘.outer‘).hover(function() {
$(this).addClass(‘active‘);
},
function() {
$(this).removeClass(‘active‘);
}).click(
function(e) {
e.stopPropagation();
e.stopImmediatePropagation();
var cls = $(this).attr(‘class‘).split(‘ ‘)[0];
var p = $(this).find(‘p‘);
var img = p.find(‘img‘).attr(‘src‘);
var preview = $(‘.preview‘);
var l = $(‘.image-slider‘).width() / 2 - preview.outerWidth() / 2;
var t = (p.offset().top - preview.height());
t -= t / 2;
preview.css({
left: l,
top: t
});
var text = p.find(‘a‘).html();
preview.find(‘img‘).attr(‘src‘, img).addClass(cls);
preview.find(‘.label‘).html(text);
preview.fadeIn("slow");
});
forwardbutton.click(function() {
left -= w;
if (left + maxScroll >= 0) {
$(‘.contents-wrapper‘).stop(false, true).animate({
left: ‘-=‘ + w
},
settings.speed);
}
else
left += w;
});
backbutton.click(function() {
if (left < 0) {
left += w;
$(‘.contents-wrapper‘).stop(false, true).animate({
left: ‘+=‘ + w
},
settings.speed);
}
});
}
initialize();
function getDimensions(value) {
return value + ‘px‘;
}
});
}
});
})(jQuery);
左右切换js
标签：lse jquery poi aci max val ima ext css
以上就是左右切换js的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！