jquery自动滚动切换图片通栏特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery自动滚动切换图片通栏特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery自动滚动切换图片通栏特效</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jscarousel.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen">
<script type="text/javascript">
$(document).ready(function() {
	$('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) { 
	// 可在这里加入点击图片之后触发的效果
	$("#overlay_pic").attr('src', src);
	$(".overlay").show();
	}, autoscroll: true });
	
	$(".overlay").click(function(){
		$(this).hide();
	});
});
</script>
</head>
<body>
<!-- 代码 开始 -->
<div class="overlay"><img src="images/img_1.jpg" id="overlay_pic"></div>
<div id="wrapper">
<div id="jsCarousel">
	<div>
		<img src="images/img_1.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_2.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_3.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_4.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_5.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_6.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_7.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_8.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_9.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_10.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_11.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_12.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_13.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_14.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_15.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
	<div>
		<img src="images/img_16.jpg" /><br />
		<span class="thumbnail-text">Image Text</span></div>
</div>
<div id="demo-side-bar">
</div>
</div>
</body>
</html>

JS代码(jscarousel.js):

(function($){
	$.fn.extend({
	jsCarousel:function(options){
	var settings = $.extend({
	scrollspeed:500,delay:5000,itemstodisplay:5,autoscroll:false,onthumbnailclick:null}
,options);
	return this.each(function(){
	var slidercontents = $(this).addClass('jscarousal-contents');
	var slider = $('<div/>').addClass('jscarousal');
	var leftbutton = $('<div/>').addClass('jscarousal-left');
	var rightbutton = $('<div/>').addClass('jscarousal-right');
	slidercontents.before(slider);
	slider.append(leftbutton);
	slider.append(slidercontents);
	slider.append(rightbutton);
	var total = $('> div',slidercontents).css('display','none').length;
	var index = 0;
	var start = 0;
	var current = $('<div/>');
	var noOfBlocks;
	var interval;
	var left;
	var display = settings.itemstodisplay;
	var speed = settings.scrollspeed;
	var containerWidth;
	var height;
	var direction = "forward";
	function initialize(){
	index = -1;
	noOfBlocks = parseInt(total / display);
	if (total % display > 0) noOfBlocks++;
	var startIndex = 0;
	var endIndex = display;
	var copy = false;
	var allElements = $('> div',slidercontents);
	$('> div',slidercontents).remove();
	allElements.addClass('thumbnail-inactive').hover(function(){
	$(this).removeClass('thumbnail-inactive').addClass('thumbnail-active');
}
,function(){
	$(this).removeClass('thumbnail-active').addClass('thumbnail-inactive');
}
) for (var i = 0;
	i < noOfBlocks;
	i++){
	if (total > display){
	startIndex = i * display;
	endIndex = startIndex + display;
	if (endIndex > total){
	startIndex -= (endIndex - total);
	endIndex = startIndex + display;
	copy = true;
}
}
else{
	startIndex = 0;
	endIndex = total;
}
var wrapper = $('<div/>') allElements.slice(startIndex,endIndex).each(function(index,el){
	if (!copy) wrapper.append(el);
	else wrapper.append($(el).clone(true));
}
);
	wrapper.find("img").click( function(){
	if (settings.onthumbnailclick != null) settings.onthumbnailclick($(this).attr('src'));
}
);
	slidercontents.append(wrapper);
}
$('> div',slidercontents).addClass('hidden');
	$('> div > div',slidercontents).css('display','');
	left = $('> div:eq(' + index + ')',slidercontents).css('left');
	containerWidth = slidercontents.width();
	height = slidercontents.get(0).offsetHeight;
	$('> div',slidercontents).css('left','-' + containerWidth + 'px');
	$('> div:eq(0)',slidercontents).addClass('visible').removeClass('hidden');
	$('> div:eq(0)',slidercontents).stop().animate({
	left:0}
,speed,function(){
	index += 1;
}
);
	slider.mouseenter(function(){
	if (settings.autoscroll) stopAnimate();
}
).mouseleave(function(){
	if (settings.autoscroll) animate();
}
);
	if (settings.autoscroll) animate();
	rightbutton.click(function(){
	direction = "forward";
	showThumbs();
}
);
	leftbutton.click(function(){
	direction = "backward";
	showThumbs();
}
);
}
initialize();
	function stopAnimate(){
	clearTimeout(interval);
	slider.children().clearQueue();
	slider.children().stop();
}
function animate(){
	clearTimeout(interval);
	if (settings.autoscroll) interval = setTimeout(changeSlide,settings.delay);
}
function changeSlide(){
	if (direction == "forward"){
	if (index >= noOfBlocks - 1){
	index = -1;
}
}
else{
	if (index <= 0) index = noOfBlocks - 1;
}
showThumbs();
	interval = setTimeout(changeSlide,settings.delay);
}
function getDimensions(value){
	return value + 'px';
}
function showThumbs(){
	var current = $('.visible');
	var scrollSpeed = speed;
	if (direction == "forward"){
	index++;
	if (index < noOfBlocks){
	$('>div:eq(' + index + ')',slidercontents).removeClass('hidden').addClass('visible').css({
	'left':getDimensions(-containerWidth)}
).stop().animate({
	'left':'+=' + getDimensions(containerWidth)}
,scrollSpeed);
	current.stop().animate({
	'left':'+=' + getDimensions(containerWidth)}
,scrollSpeed,function(){
	$(this).removeClass('visible').addClass('hidden');
	$(this).css('left',getDimensions(-containerWidth));
}
);
}
else index = noOfBlocks - 1;
}
else if (direction == "backward"){
	index--;
	if (index >= 0){
	$('>div:eq(' + index + ')',slidercontents).css('left',getDimensions(containerWidth)).removeClass('hidden').addClass('visible').stop().animate({
	'left':'-=' + getDimensions(containerWidth)}
,scrollSpeed);
	current.stop().animate({
	'left':'-=' + getDimensions(containerWidth)}
,scrollSpeed,function(){
	$(this).removeClass('visible').addClass('hidden');
	$(this).css('left',left);
}
);
}
else index = 0;
}
}
}
);
}
}
);
}
)(jQuery);

CSS代码(zzsc.css):

body{background-color:#666;}
#wrapper{margin-top:50px;text-align:center;}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:rgba(0,0,0,0.5);/*dim the background*/
 text-align:center;display:none;}
#overlay_pic{margin:200px auto;width:400px;box-shadow:10px 10px 5px #000;}
.jscarousal{width:940px;height:150px;background-color:#121212;border:solid 1px #7A7677;margin:0 auto;padding:0;padding:22px 8px 22px 8px;position:relative;/*overflow:hidden;*/
}
.jscarousal .jscarousal-left,.jscarousal .jscarousal-right{float:left;width:23px;height:98px;background-color:#121212;color:White;position:relative;top:12px;cursor:pointer;}
.jscarousal .jscarousal-left{background-image:url(../images/left_arrow.jpg);background-repeat:no-repeat;background-position:left;}
.jscarousal .jscarousal-right{background-image:url(../images/right_arrow.jpg);background-repeat:no-repeat;background-position:right;}
.jscarousal-contents{width:890px;height:160px;float:left;position:relative;overflow:hidden;}
.jscarousal-contents > div{position:absolute;width:100%;height:160px;}
.jscarousal-contents > div > div{float:left;margin-left:8px;margin-right:8px;}
.jscarousal-contents img{width:160px;height:120px;border:solid 1px #7A7677;}
.hidden{display:none;}
.visible{display:block;}
.thumbnail-active{filter:alpha(opacity=100);opacity:1.0;cursor:pointer;}
.thumbnail-inactive{filter:alpha(opacity=60);opacity:0.6;cursor:pointer;}
.thumbnail-text{color:#7A7677;font-weight:bold;text-align:left;display:block;padding:10px 2px 2px 0px;}

附件:下载该文件资源,减少时间成本(增值服务)