论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

jquery实现图片切换效果源码

文章类别：Javascript | 发表日期:2010-3-27 13:55:17

21视频教程网3月27日整理

完全是为了效果而写的代码，大家觉得有用就拿去用。
<!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">
<!--
*{padding:0; margin:0;}
body{font:12px Arial, Helvetica, sans-serif; background:#fff;}
img{border:0;}
ul{list-style-type:none;}
.switch{margin:20px auto; position:relative; width:704px; height:185px; border:solid 4px #ECEEED; background:#ECEEED;}
.switch_button{position:absolute; top:164px; right:4px; z-index:12; width:363px; height:17px;}
.switch_button dl{float:left; margin-right:6px;}
.switch_button dl dt{overflow:hidden; display:none; float:left; padding-left:8px; height:17px; line-height:17px; width:0; background:#F5F4F2;}
.switch_button dl dt a{color:#CA4B04; text-decoration:none;}
.switch_button dl dt a:hover{color:#900; text-decoration:underline;}
.switch_button dl dt,.switch_button dl dd{float:left; margin-left:6px;}
.switch_button dl dd{display:inline; overflow:hidden; height:13px; width:13px; line-height:14px; color:#f00; font-family:"宋体"; text-align:center; cursor:pointer; border:solid 2px #FFFDFE; background:#D5D7D4;}
.switch_button dl dd.current{font-weight:700; color:#F8F4F1; background:#f00;}
.l_button,.r_button{overflow:hidden; float:left; margin-top:3px; width:6px; height:11px; cursor:pointer;}
.l_button{background:url(http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/switch_button_bg.gif) no-repeat left top;}
.r_button{background:url(http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/switch_button_bg.gif) no-repeat left -11px;}
.swith_bg{position:absolute; z-index:11; height:26px; width:704px; top:159px; left:0; background:#000;}
.switch_img{position:relative; overflow:hidden; width:704px; height:185px;}
.switch_img ul li{position:absolute; overflow:hidden; z-index:0; left:704px; width:704px; height:185px; background:#fff;}
-->
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
var DDSwitch = function(options){
 this.SetOptions(options);
 this.oSwithBg = this.options.oSwithBg;
 this.oSwithButton = this.options.oSwithButton;
 this.oSwithImg = this.options.oSwithImg;
 this.oSwithRbutton = this.options.oSwithRbutton;
 this.oSwithLbutton = this.options.oSwithLbutton;
 this.oSwithClear = this.options.oSwithClear;
 
 this.iSwithBg = $(this.oSwithBg);
 this.iSwithButton = $("#" + this.oSwithButton + " > dd");
 this.iSwithTitle = $("#" + this.oSwithButton + " > dt");
 this.iSwithImg = $(this.oSwithImg + " > ul > li");
 this.iSwithRbutton = $(this.oSwithRbutton);
 this.oSwithLbutton = $(this.oSwithLbutton);
 this.iSwithClear = $(this.options.oSwithClear)
 this.timer = null;
 
 this.init();
 
 this.ClickButton();
 
 var _this = this;
 this.iSwithClear.bind("mouseover", function(){
  _this.Stop();
 }).bind("mouseout", function(){
  _this.AutoButton("auto");
 });
 
 this.AutoButton("auto");
 this.ClickRLbutton();
};
DDSwitch.prototype = {
 SetOptions: function(options){
  this.options = {
   oSwithBg: ".swith_bg",
   oSwithButton: "switchButton",
   oSwithImg: ".switch_img",
   oSwithRbutton: ".r_button",
   oSwithLbutton: ".l_button",
   oSwithClear: ".switch_button"
  };
  $.extend(this.options, options || {});
 },
 init: function(){
  this.iSwithBg.css({ opacity: 0.3 });
  $(this.iSwithButton[0]).addClass("current");
  $(this.iSwithTitle[0]).css({ display: "block", width: "208px" });
  $(this.iSwithImg[0]).css({ "z-index": 1, left: 0 });
 },
 ClickButton: function(){
  var _this = this;
  for(var i = 0; i < this.iSwithButton.length; i++){
   (function(){
    var index = i;
    $(_this.iSwithButton[index]).click(function(){
     if($(_this.iSwithButton[index]).attr("class") == "current") return;
     for(var j = 0; j < i; j++){
      if(index == j){
       $(this).addClass("current");
       $(_this.iSwithTitle[index]).css({ display: 'block' });
       $(_this.iSwithTitle[index]).animate({ width: "+=208px" }, 500);
       $(_this.iSwithImg[index]).css({ "z-index": 3 });
       $(_this.iSwithImg[index]).animate({ left: "-=704px" }, {
        duration: 500,
        complete: function(){
         for(var k = 0; k < j; k++){
          k == index ? $(this).css({ "z-index": 1 }) : $(_this.iSwithImg[k]).css({ "z-index": 0, left: "704px" });
         }
        }
       });
      } else {
       $(_this.iSwithTitle[j]).stop(true, true);
       $(_this.iSwithImg[j]).stop(true, true);
       $(_this.iSwithTitle[j]).css({ display: "none", width: 0 });
       $(_this.iSwithButton[j]).removeClass();
      }
     }
    })
   })();
  }
 },
 Pointer: function(){
  for(var i = 0; i < this.iSwithButton.length; i++){
   if($(this.iSwithButton[i]).attr("class") == "current"){
    return i;
   }
  }
 },
 Action: function(state, direction){
  var _this = this, pointer = this.Pointer();
  switch(state.toLowerCase()){
   case "right":
    if(pointer >= (_this.iSwithButton.length - 1)) { pointer = -1 }
    break;
   case "left":
    if(pointer <= 0) { pointer = _this.iSwithButton.length }
    break;
  }
  var index = pointer + direction;
  
  for(var i = 0; i < _this.iSwithButton.length; i++){
   if( i == (index)){
    $(_this.iSwithButton[index]).addClass("current");
    $(_this.iSwithTitle[index]).css({ display: 'block' });
    $(_this.iSwithTitle[index]).animate({ width: "+=208px" }, 500);
    $(_this.iSwithImg[index]).css({ "z-index": 3 });
      $(_this.iSwithImg[index]).animate({ left: "-=704px" }, {
       duration: 500,
       complete: function(){
        for(var k = 0; k < i; k++){
         k == (index) ? $(this).css({ "z-index": 1 }) : $(_this.iSwithImg[k]).css({ "z-index": 0, left: "704px" });
        }
       }
      });
   } else {
    $(_this.iSwithTitle[i]).stop(true, true);
    $(_this.iSwithImg[i]).stop(true, true);
    $(_this.iSwithTitle[i]).css({ display: "none", width: 0 });
    $(_this.iSwithButton[i]).removeClass();
   }
  }
 },
 Stop: function(){
  clearTimeout(this.timer);
  },
 AutoButton: function(){
  var _this = this;
  if(arguments[0] == "auto"){
   this.timer = window.setTimeout(function(){ _this.AutoButton("auto"); _this.Action("right", 1); }, 3000);
  }
 },
 ClickRLbutton: function(){
  var _this = this;
  this.iSwithRbutton.click(function(){ _this.Action("right", 1); });
  this.oSwithLbutton.click(function(){ _this.Action("left", -1); });
 }
};
$(document).ready(function(){
 var zz = new DDSwitch();
});
//-->
</script>
</head>
<body>
<div id="debug"></div>
<div class="switch">
 <div class="switch_img">
     <ul>
         <li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img1.jpg" /></li>
            <li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img2.jpg" /></li>
            <li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img3.jpg" /></li>
            <li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img4.jpg" /></li>
            <li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img5.jpg" /></li>
        </ul>
    </div>
   
    <div class="switch_button">
     <div class="l_button"></div>
        <dl id="switchButton">
         <dd>1</dd>
            <dt><a href="#">2010百货直减总动员</a></dt>
            <dd>2</dd>
            <dt><a href="#">当当网商店街年终回馈 免运费</a></dt>
            <dd>3</dd>
            <dt><a href="#">当当网商店街年终回馈 免运费</a></dt>
            <dd>4</dd>
            <dt><a href="#">名品冬鞋均价99元、199元、299元</a></dt>
            <dd>5</dd>
            <dt><a href="#">品牌手机限时疯抢 最低128元！</a></dt>
        </dl>
        <div class="r_button"></div>
    </div>
 <div class="swith_bg"></div>
</div>
</body>
</html>

上一篇：JS实现首页的幻灯片效果源码 人气:5421
下一篇：JS制作的表单软键盘源码 人气:2896
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058