jquery는 각 number_jquery에 진행률 표시줄이 있는 슬라이드쇼를 구현합니다.

Amazon이 새 디자인을 수정하기 전에는 각 숫자에 진행률 표시줄이 있는 홈페이지의 슬라이드쇼가 매우 마음에 들었습니다.
심심해서 저도 하나 깨달았습니다. 제이쿼리를 사용하세요.
animate() 메서드를 주로 사용하는데
재생 과정에서 진행률 표시줄이 있기 때문입니다.
Ie6은 물론 지원되지 않습니다.
데모
다운로드
먼저 렌더링을 살펴보세요

코드 보기:

코드 복사 코드는 다음과 같습니다.

<머리>


<스타일>
*{padding: 0;margin:0;}
ul li{list-style: none;}
.slideplay ,.slideshow{
위치: 상대;
}
.slideshow li{
위치: 절대;
왼쪽: 0;
상단: 0;
디스플레이: 없음;
}
.loadbar{
위치: 절대;
하단: 60px;
왼쪽: 250px;
z-색인: 9;
}
.loadbar li{
너비: 40px;
높이: 20px;
플로트: 왼쪽;
위치: 친척;
오른쪽 여백: 5px;
테두리 반경: 2px;
테두리: 1px 단색 #e5f9ff;
}
.loadbar 범위{
위치: 절대;
왼쪽: 0;
상단: 0;
높이: 20px;
너비: 40px;
텍스트 정렬: 가운데;
z-색인: 12;
커서: 포인터;
색상: #fff;
테두리 반경: 2px;
}
.loadbar em{
위치: 절대;
왼쪽: 0;
상단: 0;
높이: 20px;
배경: #31d81a;
z-색인: 10;
테두리 반경: 2px;
불투명도: 0.7
}
.zindex{
z-index: 1;
}



<본문>

• 


• 


• 


• 


• 

• 
  1
  
  


• 
  2
  
  


• 
  3
  
  


• 
  4
  
  


• 
  5
  
  

<스크립트 유형='text/javascript'>
$(function(){
var Slide = $('.slideplay'),
ulShow = $('.slideshow'),
sLi = ulShow.find('li'),
bLi = $('.loadbar li'),
len = sLi.length;
var option ={
speed:3000,
barWidth:40
},
barSpeed ​​= option.speed-100;
var w = sLi.first().width(),
h = sLi.first().height()
var flag = 0,
timer = null;
ulShow.css({
너비:w 'px',
높이:h 'px'
})
slide.css({
너비 :w 'px',
height:h 'px'
});
init()
function init(){
sLi.eq(flag).addClass('zindex ').show();
bLi.eq(flag).find('em').animate({width:option.barWidth},barSpeed)
timer = setTimeout(function(){
next();
},option.speed);
ulShow.on('mouseover',doStop)
ulShow.on('mouseleave',doAuto); 'mouseover',handPattern);
}
function handPattern(){
doStop()
flag = $(this).index(); bLi.find('em').css('width',0);
bLi.eq(flag).find('em').width(option.barWidth)
}
함수 doStop(){
timer &&clearTimeout(timer)
bLi.eq(flag).find('em').stop();
}
function doAuto(){
var em = bLi.eq(flag).find('em'),
w = em.width(),
leftW = 옵션. barWidth - w ,
sec = (leftW * barSpeed)/option.barWidth;
em.animate({width:option.barWidth},sec,function(){
if(flag==len-1){
em.width(0);
next() ;
}else{
다음()
}
});
}
function next(){
플래그 ;
플래그==len && (플래그=0);
doMove();
}
function doMove(){
imgMove();
로드바이동();
}
함수 imgMove(){
sLi.eq(flag).addClass('zindex').fadeIn('slow')
.siblings().removeClass('zindex'). fadeOut('느리게');
}
함수 loadbarMove(){
bLi.eq(flag).find('em').
animate({width:option.barWidth},barSpeed,function(){
if(flag==len-1){
bLi.find('em').width(0);
다음();
}else{
다음()
}
});
}
})