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=utf-8" />
    <title>JQuery带箭头图片左右滚动</title>
    <link href="css/zzsc.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery-latest.js"></script>
	<script type="text/javascript" src="js/slides.min.jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#slides').slides({
				effect: 'slide'
			});
		})
	</script>
</head>
<body>
<div id="slides">
	<ul class="slides_container">
		<li><a href="#" target="_blank"><img src="images/img01.jpg"/><span>“牡丹亭”——侯庆艺术展</span></a><a href="#" target="_blank"><img src="images/img02.jpg"/><span>全运会礼仪引导员面试</span></a><a href="#" target="_blank"><img src="images/img03.jpg"/><span>“牡丹亭”——侯庆艺术展</span></a><a href="#" target="_blank"><img src="images/img01.jpg"/><span>“牡丹亭”——侯庆艺术展</span></a><a href="#" target="_blank"><img src="images/img02.jpg"/><span>“牡丹亭”——侯庆艺术展</span></a></li>
		<li><a href="#" target="_blank"><img src="images/img03.jpg"/><span>“牡丹亭”——侯庆艺术展</span></a><a href="#" target="_blank"><img src="images/img02.jpg"/><span>全运会礼仪引导员面试</span></a><a href="#" target="_blank"><img src="images/img01.jpg"/><span>“牡丹亭”——侯庆艺术展</span></a><a href="#" target="_blank"><img src="images/img03.jpg"/><span>“牡丹亭”——侯庆艺术展</span></a><a href="#" target="_blank"><img src="images/img02.jpg"/><span>全运会礼仪引导员面试</span></a></li>	
	</ul>
	<a href="#" class="prev">prev</a>
	<a href="#" class="next">next</a>					
</div>
</body>
</html>

JS代码(slides.min.jquery.js):

/** Slides,A Slideshow Plugin for jQuery* Intructions:http://slidesjs.com* By:Nathan Searles,http://nathansearles.com* Version:1.1.2* Updated:February 14th,2011*/
 (function($){
	$.fn.slides = function(option){
	option = $.extend({
}
,$.fn.slides.option,option);
	return this.each(function(){
	$('.' + option.container,$(this)).children().wrapAll('<div class="slides_control"/>');
	var elem = $(this),control = $('.slides_control',elem),total = control.children().size(),width = control.children().outerWidth(),height = control.children().outerHeight(),start = option.start - 1,effect = option.effect.indexOf(',') < 0 ? option.effect:option.effect.replace(' ','').split(',')[0],paginationEffect = option.effect.indexOf(',') < 0 ? effect:option.effect.replace(' ','').split(',')[1],next = 0,prev = 0,number = 0,current = 0,loaded,active,clicked,position,direction,imageParent;
	if (total < 2){
	return;
}
if (start < 0){
	start = 0;
}
;
	if (start > total){
	start = total - 1;
}
;
	if (option.start){
	current = start;
}
;
	if (option.randomize){
	control.randomize();
}
$('.' + option.container,elem).css({
	overflow:'hidden',position:'relative'}
);
	control.children().css({
	position:'absolute',top:0,left:control.children().outerWidth(),zIndex:0,display:'none'}
);
	control.css({
	position:'relative',width:(width * 3),height:height,left:-width}
);
	$('.' + option.container,elem).css({
	display:'block'}
);
	if (option.autoHeight){
	control.children().css({
	height:'auto'}
);
	control.animate({
	height:control.children(':eq(' + start + ')').outerHeight()}
,option.autoHeightSpeed);
}
if (option.preload && control.find('img').length){
	$('.' + option.container,elem).css({
	background:'url(' + option.preloadImage + ') no-repeat 50% 50%'}
);
	var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime();
	if ($('img',elem).parent().attr('class') != 'slides_control'){
	imageParent = control.children(':eq(0)')[0].tagName.toLowerCase();
}
else{
	imageParent = control.find('img:eq(' + start + ')');
}
control.find('img:eq(' + start + ')').attr('src',img).load(function(){
	control.find(imageParent + ':eq(' + start + ')').fadeIn(option.fadeSpeed,function(){
	$(this).css({
	zIndex:5}
);
	elem.css({
	background:''}
);
	loaded = true;
}
);
}
);
}
else{
	control.children(':eq(' + start + ')').fadeIn(option.fadeSpeed,function(){
	loaded = true;
}
);
}
if (option.bigTarget){
	control.children().css({
	cursor:'pointer'}
);
	control.children().click(function(){
	animate('next',effect);
	return false;
}
);
}
if (option.hoverPause && option.play){
	control.children().bind('mouseover',function(){
	stop();
}
);
	control.children().bind('mouseleave',function(){
	pause();
}
);
}
if (option.generateNextPrev){
	$('.' + option.container,elem).after('<a href="#" class="' + option.prev + '">Prev</a>');
	$('.' + option.prev,elem).after('<a href="#" class="' + option.next + '">Next</a>');
}
$('.' + option.next,elem).click(function(e){
	e.preventDefault();
	if (option.play){
	pause();
}
;
	animate('next',effect);
}
);
	$('.' + option.prev,elem).click(function(e){
	e.preventDefault();
	if (option.play){
	pause();
}
;
	animate('prev',effect);
}
);
	if (option.generatePagination){
	elem.append('<ul class=' + option.paginationClass + '></ul>');
	control.children().each(function(){
	$('.' + option.paginationClass,elem).append('<li><a href="#' + number + '">' + (number + 1) + '</a></li>');
	number++;
}
);
}
else{
	$('.' + option.paginationClass + ' li a',elem).each(function(){
	$(this).attr('href','#' + number);
	number++;
}
);
}
$('.' + option.paginationClass + ' li:eq(' + start + ')',elem).addClass('current');
	$('.' + option.paginationClass + ' li a',elem).click(function(){
	if (option.play){
	pause();
}
;
	clicked = $(this).attr('href').match('[^#/]+$');
	if (current != clicked){
	animate('pagination',paginationEffect,clicked);
}
return false;
}
);
	$('a.link',elem).click(function(){
	if (option.play){
	pause();
}
;
	clicked = $(this).attr('href').match('[^#/]+$') - 1;
	if (current != clicked){
	animate('pagination',paginationEffect,clicked);
}
return false;
}
);
	if (option.play){
	playInterval = setInterval(function(){
	animate('next',effect);
}
,option.play);
	elem.data('interval',playInterval);
}
;
	function stop(){
	clearInterval(elem.data('interval'));
}
;
	function pause(){
	if (option.pause){
	clearTimeout(elem.data('pause'));
	clearInterval(elem.data('interval'));
	pauseTimeout = setTimeout(function(){
	clearTimeout(elem.data('pause'));
	playInterval = setInterval(function(){
	animate("next",effect);
}
,option.play);
	elem.data('interval',playInterval);
}
,option.pause);
	elem.data('pause',pauseTimeout);
}
else{
	stop();
}
}
;
	function animate(direction,effect,clicked){
	if (!active && loaded){
	active = true;
	switch (direction){
	case 'next':prev = current;
	next = current + 1;
	next = total === next ? 0:next;
	position = width * 2;
	direction = -width * 2;
	current = next;
	break;
	case 'prev':prev = current;
	next = current - 1;
	next = next === -1 ? total - 1:next;
	position = 0;
	direction = 0;
	current = next;
	break;
	case 'pagination':next = parseInt(clicked,10);
	prev = $('.' + option.paginationClass + ' li.current a',elem).attr('href').match('[^#/]+$');
	if (next > prev){
	position = width * 2;
	direction = -width * 2;
}
else{
	position = 0;
	direction = 0;
}
current = next;
	break;
}
if (effect === 'fade'){
	option.animationStart();
	if (option.crossfade){
	control.children(':eq(' + next + ')',elem).css({
	zIndex:10}
).fadeIn(option.fadeSpeed,function(){
	if (option.autoHeight){
	control.animate({
	height:control.children(':eq(' + next + ')',elem).outerHeight()}
,option.autoHeightSpeed,function(){
	control.children(':eq(' + prev + ')',elem).css({
	display:'none',zIndex:0}
);
	control.children(':eq(' + next + ')',elem).css({
	zIndex:0}
);
	option.animationComplete(next + 1);
	active = false;
}
);
}
else{
	control.children(':eq(' + prev + ')',elem).css({
	display:'none',zIndex:0}
);
	control.children(':eq(' + next + ')',elem).css({
	zIndex:0}
);
	option.animationComplete(next + 1);
	active = false;
}
}
);
}
else{
	option.animationStart();
	control.children(':eq(' + prev + ')',elem).fadeOut(option.fadeSpeed,function(){
	if (option.autoHeight){
	control.animate({
	height:control.children(':eq(' + next + ')',elem).outerHeight()}
,option.autoHeightSpeed,function(){
	control.children(':eq(' + next + ')',elem).fadeIn(option.fadeSpeed);
}
);
}
else{
	control.children(':eq(' + next + ')',elem).fadeIn(option.fadeSpeed,function(){
	if ($.browser.msie){
	$(this).get(0).style.removeAttribute('filter');
}
}
);
}
option.animationComplete(next + 1);
	active = false;
}
);
}
}
else{
	control.children(':eq(' + next + ')').css({
	left:position,display:'block'}
);
	if (option.autoHeight){
	option.animationStart();
	control.animate({
	left:direction,height:control.children(':eq(' + next + ')').outerHeight()}
,option.slideSpeed,function(){
	control.css({
	left:-width}
);
	control.children(':eq(' + next + ')').css({
	left:width,zIndex:5}
);
	control.children(':eq(' + prev + ')').css({
	left:width,display:'none',zIndex:0}
);
	option.animationComplete(next + 1);
	active = false;
}
);
}
else{
	option.animationStart();
	control.animate({
	left:direction}
,option.slideSpeed,function(){
	control.css({
	left:-width}
);
	control.children(':eq(' + next + ')').css({
	left:width,zIndex:5}
);
	control.children(':eq(' + prev + ')').css({
	left:width,display:'none',zIndex:0}
);
	option.animationComplete(next + 1);
	active = false;
}
);
}
}
if (option.pagination){
	$('.' + option.paginationClass + ' li.current',elem).removeClass('current');
	$('.' + option.paginationClass + ' li:eq(' + next + ')',elem).addClass('current');
}
}
}
;
}
);
}
;
	$.fn.slides.option ={
	preload:false,preloadImage:'/img/loading.gif',container:'slides_container',generateNextPrev:false,next:'next',prev:'prev',pagination:true,generatePagination:true,paginationClass:'pagination',fadeSpeed:350,slideSpeed:350,start:1,effect:'slide',crossfade:false,randomize:false,play:0,pause:0,hoverPause:false,autoHeight:false,autoHeightSpeed:350,bigTarget:false,animationStart:function(){
}
,animationComplete:function(){
}
}
;
	$.fn.randomize = function(callback){
	function randomizeOrder(){
	return (Math.round(Math.random()) - 0.5);
}
return ($(this).each(function(){
	var $this = $(this);
	var $children = $this.children();
	var childCount = $children.length;
	if (childCount > 1){
	$children.hide();
	var indices = [];
	for (i = 0;
	i < childCount;
	i++){
	indices[indices.length] = i;
}
indices = indices.sort(randomizeOrder);
	$.each(indices,function(j,k){
	var $child = $children.eq(k);
	var $clone = $child.clone(true);
	$clone.show().appendTo($this);
	if (callback !== undefined){
	callback($child,$clone);
}
$child.remove();
}
);
}
}
));
}
;
}
)(jQuery);

CSS代码(zzsc.css):

@charset "utf-8";/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:0 auto;font-family:"宋体";color:#898989;}
table{border-collapse:collapse;border-spacing:0;}
b,em,i{font-style:normal;font-weight:normal;}
h1,h2,h3{font-size:14px;}
h4{font-weight:normal;font-size:14px;}
h5{font-size:12px;}
h6{font-size:12px;font-weight:normal;}
img{display:block;}
.adpic{width:100%;float:left;margin-bottom:10px;}
.adpic img{width:100%;}
#wrap .noright{margin-right:0;padding-right:0;}
#wrap .nobottom{margin-bottom:0;padding-bottom:0;}
#wrap .notop{margin-top:0;padding-top:0;}
#wrap .nobg{background:none;}
#wrap .noline{border:none;}
.check,.radio{margin-right:3px;_margin-right:0;}
.pcenter{text-align:center;}
.pcenter img{margin:0 auto;}
#wrap{width:950px;overflow:hidden;margin:0 auto;text-align:left;}
a{color:#6e6e76;text-decoration:none;}
a:hover{text-decoration:underline;color:#ef9b11;}
.l{width:100%;float:left;}
.fl{display:inline;float:left;}
.fr{display:inline;float:right;}
.content{float:left;_display:inline;overflow:hidden;}
.side{float:right;_display:inline;overflow:hidden;}
#slides{width:1000px;margin:20px auto;height:240px;overflow:hidden;position:relative;}
.slides_container li{width:1000px;float:left;}
.slides_container li a{display:inline-block;width:198px;height:162px;border:1px solid #fff;}
.slides_container li a img{width:198px;height:132px;}
.slides_container li a span{display:block;width:198px;cursor:pointer;height:30px;line-height:30px;background:#262626;color:#fff;}
.slides_container li a:hover{border:1px solid #ff8400;}
.slides_container li a:hover span{color:#ff8400;}
.pagination{position:absolute;left:483px;z-index:10;top:170px;}
.pagination li{float:left;padding-right:7px;}
.pagination a{display:block;outline:none;background:url(../images/pg.gif) no-repeat -1px 0;text-indent:-999em;width:14px;height:14px;}
.pagination li.current a{background-position:-22px 0;}
.prev{background:url(../images/arr.png) no-repeat;width:29px;height:43px;display:block;left:1px;top:50px;position:absolute;text-indent:-999em;outline:none;z-index:11;}
.prev:hover{background-position:0 -43px;}
.next{background:url(../images/arr.png) no-repeat -29px 0;width:29px;height:43px;display:block;right:1px;top:50px;position:absolute;text-indent:-999em;outline:none;z-index:11;}
.next:hover{background-position:-29px -43px;}

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