jQuery-插件-图片切换

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

十度

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>
		<script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js">
		</script>
	</head>
	<body>
		<div class="tagAD">
			<ul class="AD-pic">
				<li>
					<a href="/">
						<img src="http://ku.shouce.ren/img/da/12.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="/">
						<img src="http://ku.shouce.ren/img/da/15.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="/">
						<img src="http://ku.shouce.ren/img/da/12.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="/">
						<img src="http://ku.shouce.ren/img/da/15.jpg" alt="" />
					</a>
				</li>
			</ul>
			<div class="count">
				<ul>
					<li>
						<img class="abc" src="" alt="" />
					</li>
					<li>
						<img src="" alt="" />
					</li>
					<li>
						<img src="" alt="" />
					</li>
					<li>
						<img src="" alt="" />
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

​x
 
<!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>
        <script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js">
        </script>
    </head>
    <body>
        <div class="tagAD">
            <ul class="AD-pic">
                <li>
                    <a href="/">
                        <img src="http://ku.shouce.ren/img/da/12.jpg" alt="" />

CSS代码

复制格式化注释注释颜色清空

放大

xxxxxxxxxx
 
*{
  margin:0;
  padding:0;
  list-style:none;
}
.tagAD{
  position:relative;
  margin-left:2px;
  width:1088px;
  height:455px;
}
.AD-pic{
  width:1088px;
  height:455px;
}
.count{
  text-align:right;
  position:absolute;
  z-index:10;
  right:10px;
}
.count ul li{
  float:left;
  width:14px;
  height:14px;
  margin-right:10px;
}
​

JS代码

复制格式化注释注释清空

放大

// jQuery插件编写
;(function($){
  $.fn.extend({
    "zj_ppt":function(value){
      //默认参数定义
      var $this = $(this);
      value = $.extend({
        "time":1000,		//间隔变化动画时间
        "con":0,
        "count":"count",	//切换小图的父级class名字
        "src":"src",		//切换小图片路径
        "src_cur":"src_cur"	//当前切换小图片路径
      }
                       ,value);
      //图片切换函数
      function autopic(){
        $("li",$this[0]).hide();
        $("li:eq("+value.con+")",$this[0]).show();
        $(value.count).find("ul li img").attr("src",value.src);
        $(value.count).find("ul li img:eq("+value.con+")").attr("src",value.src_cur);
        if(value.con>$("li",$this[0]).length-2){
          value.con = 0;
        }
        else{
          value.con += 1;
        }
      }
      autopic();
      //每间隔多少时间执行一次图片切换
      var auto = setInterval(autopic,value.time);
      //鼠标悬停时切换图片，并停止自动切换
      $(value.count).find("ul li").hover(function(){
        var _index = $(this).index();
        value.con = _index;
        autopic();
        clearTimeout(auto);
      }
                                         ,function(){
        var _index = $(this).index();
        value.con = _index;
        auto = setInterval(autopic,value.time);
      }
                                        );
      //反回原对像，以便连缀JQuery的其它方法
      return $this;
    }
  }
             );
}
)(jQuery);
//插件使用
$(function(){
  $(".AD-pic").zj_ppt({
    "src":"/upload/files/201604/96c685dfa3a.png",			//切换小图片路径
    "src_cur":"/upload/files/201604/1d2cb35ea9b.png",		//当前切换小图片路径
    "count":".count",					//切换小图的父级class名字	
    "time":3000                         //间隔变化动画时间
  }
                     )
}
 )

xxxxxxxxxx
 
// jQuery插件编写
;(function($){
  $.fn.extend({
    "zj_ppt":function(value){
      //默认参数定义
      var $this = $(this);
      value = $.extend({
        "time":1000,        //间隔变化动画时间
        "con":0,
        "count":"count",    //切换小图的父级class名字
        "src":"src",        //切换小图片路径
        "src_cur":"src_cur" //当前切换小图片路径
      }
                       ,value);
      //图片切换函数

运行代码

简介

请输入代码名称！

名称

jQuery-插件-图片切换

分类

图片代码

描述

jQuery-插件-图片切换(第一次自已偿试写插件)