首页  /  留言  /  音乐  /  管理

jQuery图片切换示例

<!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>程正伟的博客</title>
<style type="text/css">
ul {
 padding:0px;
 margin:0px;
 list-style:none;
}
ul li {
 float:left;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
 $(‘#example2‘).bxCarousel({
  display_num: 6, //
  move: 2, //
  auto: true, //
  controls: false, //
  margin: 10,
  auto_hover: true //
 });
});
 
 (function($){$.fn.bxCarousel=function(options){var defaults={move:4,display_num:4,speed:500,margin:0,auto:false,auto_interval:2000,auto_dir:‘next‘,auto_hover:false,next_text:‘next‘,next_image:‘‘,prev_text:‘prev‘,prev_image:‘‘,controls:true};var options=$.extend(defaults,options);return this.each(function(){var $this=$(this);var li=$this.find(‘li‘);var first=0;var fe=0;var last=options.display_num-1;var le=options.display_num-1;var is_working=false;var j=‘‘;var clicked=false;li.css({‘float‘:‘left‘,‘listStyle‘:‘none‘,‘marginRight‘:options.margin});var ow=li.outerWidth(true);wrap_width=(ow*options.display_num)-options.margin;var seg=ow*options.move;$this.wrap(‘<div class="bx_container"></div>‘).width(999999);if(options.controls){if(options.next_image!=‘‘||options.prev_image!=‘‘){var controls=‘<a href="" class="prev"><img src="‘+options.prev_image+‘"/></a><a href="" class="next"><img src="‘+options.next_image+‘"/></a>‘;}
else{var controls=‘<a href="" class="prev">‘+options.prev_text+‘</a><a href="" class="next">‘+options.next_text+‘</a>‘;}}
$this.parent(‘.bx_container‘).wrap(‘<div class="bx_wrap"></div>‘).css({‘position‘:‘relative‘,‘width‘:wrap_width,‘overflow‘:‘hidden‘}).before(controls);var w=li.slice(0,options.display_num).clone();var last_appended=(options.display_num+options.move)-1;$this.empty().append(w);get_p();get_a();$this.css({‘position‘:‘relative‘,‘left‘:-(seg)});$this.parent().siblings(‘.next‘).click(function(){slide_next();clearInterval(j);clicked=true;return false;});$this.parent().siblings(‘.prev‘).click(function(){slide_prev();clearInterval(j);clicked=true;return false;});if(options.auto){start_slide();if(options.auto_hover&&clicked!=true){$this.find(‘li‘).live(‘mouseenter‘,function(){if(!clicked){clearInterval(j);}});$this.find(‘li‘).live(‘mouseleave‘,function(){if(!clicked){start_slide();}});}}
function start_slide(){if(options.auto_dir==‘next‘){j=setInterval(function(){slide_next()},options.auto_interval);}else{j=setInterval(function(){slide_prev()},options.auto_interval);}}
function slide_next(){if(!is_working){is_working=true;set_pos(‘next‘);$this.animate({left:‘-=‘+seg},options.speed,function(){$this.find(‘li‘).slice(0,options.move).remove();$this.css(‘left‘,-(seg));get_a();is_working=false;});}}
function slide_prev(){if(!is_working){is_working=true;set_pos(‘prev‘);$this.animate({left:‘+=‘+seg},options.speed,function(){$this.find(‘li‘).slice(-options.move).remove();$this.css(‘left‘,-(seg));get_p();is_working=false;});}}
function get_a(){var str=new Array();var lix=li.clone();le=last;for(i=0;i<options.move;i++){le++
if(lix[le]!=undefined){str[i]=$(lix[le]);}else{le=0;str[i]=$(lix[le]);}}
$.each(str,function(index){$this.append(str[index][0]);});}
function get_p(){var str=new Array();var lix=li.clone();fe=first;for(i=0;i<options.move;i++){fe--
if(lix[fe]!=undefined){str[i]=$(lix[fe]);}else{fe=li.length-1;str[i]=$(lix[fe]);}}
$.each(str,function(index){$this.prepend(str[index][0]);});}
function set_pos(dir){if(dir==‘next‘){first+=options.move;if(first>=li.length){first=first%li.length;}
last+=options.move;if(last>=li.length){last=last%li.length;}}else if(dir==‘prev‘){first-=options.move;if(first<0){first=li.length+first;}
last-=options.move;if(last<0){last=li.length+last;}}}});}})(jQuery);
 </script>
</head>
<body>
<ul id="example2">
  <li><img height="107" width="107" alt="LUFFY" src="images/pic_one.jpg"></li>
  <li><img height="107" width="107" alt="ZORO" src="images/pic_two.jpg"></li>
  <li><img height="107" width="107" alt="NAMI" src="images/pic_three.jpg"></li>
  <li><img height="107" width="107" alt="SANJI" src="images/pic_four.jpg"></li>
  <li><img height="107" width="107" alt="USOPP" src="images/pic_five.jpg"></li>
  <li><img height="107" width="107" alt="Chopper" src="images/pic_six.jpg"></li>
  <li><img height="107" width="107" alt="ROBIN" src="images/pic_seven.jpg"></li>
  <li><img height="107" width="107" alt="LUFFY" src="images/pic_one.jpg"></li>
  <li><img height="107" width="107" alt="ZORO" src="images/pic_two.jpg"></li>
  <li><img height="107" width="107" alt="NAMI" src="images/pic_three.jpg"></li>
  <li><img height="107" width="107" alt="SANJI" src="images/pic_four.jpg"></li>
  <li><img height="107" width="107" alt="USOPP" src="images/pic_five.jpg"></li>
  <li><img height="107" width="107" alt="Chopper" src="images/pic_six.jpg"></li>
  <li><img height="107" width="107" alt="ROBIN" src="images/pic_seven.jpg"></li>
  <li><img height="107" width="107" alt="LUFFY" src="images/pic_one.jpg"></li>
  <li><img height="107" width="107" alt="ZORO" src="images/pic_two.jpg"></li>
  <li><img height="107" width="107" alt="NAMI" src="images/pic_three.jpg"></li>
  <li><img height="107" width="107" alt="SANJI" src="images/pic_four.jpg"></li>
  <li><img height="107" width="107" alt="USOPP" src="images/pic_five.jpg"></li>
  <li><img height="107" width="107" alt="Chopper" src="images/pic_six.jpg"></li>
  <li><img height="107" width="107" alt="ROBIN" src="images/pic_seven.jpg"></li>
</ul>
</body>
</html>
 

作者:Wilber 类别:编程学习 时间:2010/12/24 16:55:00 评论:0 点击182
标签:  jQuery,图片切换
打印:  打印本页
字体:  
本页地址:  http://www.webczw.com/s/2010122416550076977.html
上一篇:枕头大战
下一篇:一个什么样的盒子(天涯完整版)

  评论    
当第一个评论者吧!抢沙发>>
  
昵    称: Wilber
形    象:
内    容:
验证码:   
以上网友发言只代表其个人观点,不代表伟博小城的观点或立场。
  Copyright © 2010 - 2016 WEBCZW.COM, All Rights Reserved
伟博小城  版权所有 网站统计
粤ICP备14091989号