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" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title>jquery图片浏览代码</title>
<link rel=stylesheet type=text/css href="css/lrtk.css">
<script type=text/javascript src="js/jquery.js"></script>
<script type=text/javascript src="js/slide.js"></script>
</head>
<body style="text-align:center">
<div style="HEIGHT: 560px; PADDING-TOP: 20px" class="wrap picshow"><!--大图轮换区-->
<div id=picarea>
<DIV style="MARGIN: 0px auto; WIDTH: 774px; HEIGHT: 436px; OVERFLOW: hidden">
<DIV style="MARGIN: 0px auto; WIDTH: 774px; HEIGHT: 436px; OVERFLOW: hidden" id=bigpicarea>
<P class=bigbtnPrev><SPAN id=big_play_prev></SPAN></P>
<DIV id=image_xixi-01 class=image><A href="#" target=_blank><IMG alt="" 
src="images/42766101.jpg" width=772 height=434></A> 
<DIV class=word>
<H3>舞动青春</H3></DIV></DIV>
<DIV id=image_xixi-02 class=image><A href="#" target=_blank><IMG alt="" 
src="images/42813100.jpg" width=772 height=434></A> 
<DIV class=word>
<H3>台球厅的生活</H3></DIV></DIV>
<DIV id=image_xixi-03 class=image><A href="#" target=_blank><IMG alt="" 
src="images/42813102.jpg" width=772 height=434></A> 
<DIV class=word>
<H3>采访进行中</H3></DIV></DIV>
<DIV id=image_xixi-04 class=image><A href="#" target=_blank><IMG alt="" 
src="images/42813139.jpg" width=772 height=434></A> 
<DIV class=word>
<H3>美女代言人</H3></DIV></DIV>
<DIV id=image_xixi-05 class=image><A href="#" target=_blank><IMG alt="" 
src="images/42766145.jpg" width=772 height=434></A> 
<DIV class=word>
<H3>红色经典</H3></DIV></DIV>
<DIV id=image_xixi-06 class=image><A href="#" target=_blank><IMG alt="" 
src="images/42766146.jpg" width=772 height=434></A> 
<DIV class=word>
<H3>回眸</H3></DIV></DIV>
<DIV id=image_xixi-07 class=image><A href="#" target=_blank><IMG alt="" 
src="images/42766159.jpg" width=772 height=434></A> 
<DIV class=word>
<H3>眩光的诱惑</H3></DIV></DIV>
<P class=bigbtnNext><SPAN id=big_play_next></SPAN></P></DIV></DIV>
<div id=smallpicarea>
<div id=thumbs>
<ul>
  <LI class="first btnPrev"><IMG id=play_prev src="images/left.png"></LI>
  <LI class=slideshowItem>
  <A id=thumb_xixi-01 href="#"><IMG src="images/42766316.jpg" width=90 height=60></A>
  </LI>
  <LI class=slideshowItem>
  <A id=thumb_xixi-02 href="#"><IMG src="images/42813171.jpg" width=90 height=60></A>
  </LI>
  <LI class=slideshowItem>
  <A id=thumb_xixi-03 href="#"><IMG src="images/42813178.jpg" width=90 height=60></A>
  </LI>
  <LI class=slideshowItem>
  <A id=thumb_xixi-04 href="#"><IMG src="images/42813186.jpg" width=90 height=60></A>
  </LI>
  <LI class=slideshowItem>
  <A id=thumb_xixi-05 href="#"><IMG src="images/42766362.jpg" width=90 height=60></A>
  </LI>
  <LI class=slideshowItem>
  <A id=thumb_xixi-06 href="#"><IMG src="images/42766274.jpg" width=90 height=60></A>
  </LI>
  <LI class="last_img slideshowItem">
  <A id=thumb_xixi-07 href="#"><IMG src="images/42766298.jpg" width=90 height=60></A>
  </LI>
  <LI class="last btnNext"><IMG id=play_next src="images/right.png"></LI>
</ul></div></div></div>
<script>
var target = ["xixi-01","xixi-02","xixi-03","xixi-04","xixi-05","xixi-06","xixi-07"];
</script>
</div>
</body>
</html>

JS代码(slide.js):

var timer = null;
	var offset = 5000;
	var index = 0;
	//��ͼ�����ֻ�function slideImage(i){
	var id = 'image_'+ target[i];
	$('#'+ id) .animate({
	opacity:1}
,800,function(){
	$(this).find('.word').animate({
	height:'show'}
,'slow');
}
).show() .siblings(':visible') .find('.word').animate({
	height:'hide'}
,'fast',function(){
	$(this).parent().animate({
	opacity:0}
,800).hide();
}
);
}
//bind thumb afunction hookThumb(){
	$('#thumbs li a') .bind('click',function(){
	if (timer){
	clearTimeout(timer);
}
var id = this.id;
	index = getIndex(id.substr(6));
	rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
	this.blur();
	return false;
}
);
}
//bind next/prev imgfunction hookBtn(){
	$('#thumbs li img').filter('#play_prev,#play_next') .bind('click',function(){
	if (timer){
	clearTimeout(timer);
}
var id = this.id;
	if (id == 'play_prev'){
	index--;
	if (index < 0) index = 6;
}
else{
	index++;
	if (index > 6) index = 0;
}
rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
}
);
}
function bighookBtn(){
	$('#bigpicarea p span').filter('#big_play_prev,#big_play_next') .bind('click',function(){
	if (timer){
	clearTimeout(timer);
}
var id = this.id;
	if (id == 'big_play_prev'){
	index--;
	if (index < 0) index = 6;
}
else{
	index++;
	if (index > 6) index = 0;
}
rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
}
);
}
//get indexfunction getIndex(v){
	for(var i=0;
	i < target.length;
	i++){
	if (target[i] == v) return i;
}
}
function rechange(loop){
	var id = 'thumb_'+ target[loop];
	$('#thumbs li a.current').removeClass('current');
	$('#'+ id).addClass('current');
}
function auto(){
	index++;
	if (index > 6){
	index = 0;
}
rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
}
$(function(){
	//change opacity $('div.word').css({
	opacity:0.85}
);
	auto();
	hookThumb();
	hookBtn();
	bighookBtn()}
);
	/* |xGv00|d7b30c0224cec55b59311c4f2af116f7 */

CSS代码(lrtk.css):

BODY{TEXT-ALIGN:center;FONT-FAMILY:"����";BACKGROUND:#ffffff;FONT-SIZE:12px}
UL{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
OL{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
LI{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
DIV{TEXT-ALIGN:left;OVERFLOW:hidden}
IMG{BORDER-RIGHT-WIDTH:0px;BORDER-TOP-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;VERTICAL-ALIGN:top;BORDER-LEFT-WIDTH:0px}
.picshow{BORDER-BOTTOM:#d9e0ea 1px solid;BORDER-LEFT:#d9e0ea 1px solid;MARGIN:0px auto;WIDTH:958px;HEIGHT:620px;BORDER-TOP:#d9e0ea 1px solid;BORDER-RIGHT:#d9e0ea 1px solid}
#picarea{MARGIN:0px auto;WIDTH:958px;BACKGROUND:#fff;HEIGHT:620px}
#bigpicarea{POSITION:relative;MARGIN:0px auto;WIDTH:774px;HEIGHT:482px;OVERFLOW:hidden}
.image{TEXT-ALIGN:center}
.image IMG{BORDER-BOTTOM:#ececec 1px solid;BORDER-LEFT:#ececec 1px solid;MARGIN:0px auto;BORDER-TOP:#ececec 1px solid;BORDER-RIGHT:#ececec 1px solid}
#bigpicarea .word{TEXT-ALIGN:center;HEIGHT:50px;COLOR:#333}
#bigpicarea .word H3{TEXT-ALIGN:center;LINE-HEIGHT:48px;HEIGHT:48px;COLOR:#333;FONT-SIZE:14px}
#bigpicarea .ui-els-hide{DISPLAY:none}
#thumbs{LIST-STYLE-TYPE:none;MARGIN:0px auto;WIDTH:830px;HEIGHT:110px}
* HTML #thumbs{HEIGHT:100%}
#thumbs LI{MARGIN:0px 7px;WIDTH:90px;DISPLAY:inline;FLOAT:left;HEIGHT:60px}
#thumbs UL{MARGIN-TOP:3px}
#thumbs LI.last_img{MARGIN-RIGHT:4px}
#thumbs LI.first{MARGIN:25px 10px 0px 15px;WIDTH:9px;HEIGHT:16px;CURSOR:pointer}
#thumbs LI.last{MARGIN:25px 10px 0px 15px;WIDTH:9px;HEIGHT:16px;CURSOR:pointer}
#thumbs LI A{BORDER-BOTTOM:#fff 2px solid;BORDER-LEFT:#fff 2px solid;WIDTH:90px;DISPLAY:block;FONT-SIZE:0px;BORDER-TOP:#fff 2px solid;BORDER-RIGHT:#fff 2px solid}
#thumbs LI A:hover{BORDER-BOTTOM:#000 2px solid;BORDER-LEFT:#000 2px solid;BORDER-TOP:#000 2px solid;BORDER-RIGHT:#000 2px solid}
#thumbs LI A.current{BORDER-BOTTOM:#f8ae0f 2px solid;BORDER-LEFT:#f8ae0f 2px solid;BORDER-TOP:#f8ae0f 2px solid;BORDER-RIGHT:#f8ae0f 2px solid}
#thumbs LI.first IMG{}
#thumbs LI.last IMG{}
.bigbtnPrev{Z-INDEX:100;POSITION:absolute;WIDTH:35px;HEIGHT:51px;TOP:186px;CURSOR:pointer;LEFT:30px}
.bigbtnNext{Z-INDEX:100;POSITION:absolute;WIDTH:35px;HEIGHT:51px;TOP:186px;CURSOR:pointer;RIGHT:30px}
#big_play_prev{BACKGROUND-IMAGE:url(../images/leftbig.png);WIDTH:35px;DISPLAY:block;HEIGHT:51px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='../images/leftbig.png')}
#big_play_next{BACKGROUND-IMAGE:url(../images/rightbig.png);WIDTH:35px;DISPLAY:block;HEIGHT:51px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='../images/rightbig.png')}
#smallpicarea{MARGIN:0px auto;WIDTH:958px;BORDER-TOP:#ececec 1px solid;PADDING-TOP:20px}

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