<!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://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<style type="text/css">

  /** css Reset star like yahoo **/

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, th, td {

 padding: 0;

 margin: 0;

}

table {

 border-collapse: collapse;

 border-spacing: 0;

}

fieldset, img {

 border: 0;

}

ul,li{list-style:none;}

h1, h2, h3, h4, h5, h6 {

 font-weight: normal;

 font-size: 100%;

}

#wrapper {

 border:1px #ccc solid;

 position:relative;

 overflow:hidden;

 width:573px;

 height:257px;

 font-size:14px;

 font-family:Tahoma, Geneva, sans-serif;

}

#number {

 width:88px;

 position:absolute;

 left:10px;

 bottom:10px;

}

#number li {

 padding-left:6px;

 float:left;

 text-indent:-9999px;

 width:16px;

 height:16px;

 overflow:hidden;

 background-image:url(../images/number1.png);

 background-repeat:no-repeat;

}

#buttom_0 {

 background-position:0 0;

}

#buttom_1 {

 background-position:-22px 0;

}

#buttom_2 {

 background-position:-44px 0;

}

#buttom_3 {

 background-position:-66px 0;

}

#buttom_0.selected {

 background-position:0 -16px;

}

#buttom_1.selected {

 background-position:-22px -16px;

}

#buttom_2.selected {

 background-position:-44px -16px;

}

#buttom_3.selected {

 background-position:-66px -16px;

}

/* */

.content_right{float:left;}

.content_right .ad {

 margin-bottom:10px;

 width:573px;

 height:257px;

 overflow:hidden;

 position:relative;

}

.content_right .slider,.content_right .num{

 position:absolute;

}

.content_right .slider li{

}

.content_right .slider img{

 width:573px;

 height:257px;

 display:block;

}

.content_right .num{

 right:5px;

 bottom:5px;

}

.content_right .num li{

 float: left;

 color: #069;

 text-align: center;

 line-height: 16px;

 width: 16px;

 height: 16px;

 font-family: Arial;

 font-size: 12px;

 cursor: pointer;

 overflow: hidden;

 margin: 3px 1px;

 border: 1px solid #069;

 background-color: #fff;

}

.content_right .num li.on{

 color: #fff;

 line-height: 16px;

 width: 16px;

 height: 16px;

 font-size: 14px;

 margin: 3px 1px;

 border: 1px solid #069;

 background-color: #069;

 font-weight: bold;

}

</style>

<script type="text/javascript">

/**

* author jackluo

*/

/*首页广告效果*/

(function($){

  $.fn.webjoy = function(option){

    void 0 === option && (option = {});

    var defaults = {

          slideshowSpeed:2000,

          animationSpeed:1000,

          direction:'top',

        },

        opt = $.extend({},defaults,option);

    var a = $(this),

        slideshowSpeed = 2000,

        animationSpeed =1000,

          c = a.find(opt.selector ? opt.selector: ".num > li")

          s = a.find(opt.slider ? opt.slider: ".slider");

    slider = function(){

      var  len  = c.length,

           index=0,  

           adTimer;

     opt.direction == 'top'?index = len-1:index=0;

      c.mouseover(function(){//鼠标移进效果

          index = c.index(this); //

          void opt.direction == 'top'?topshowImg(index):bottomshowImg(index); //

      }).eq(index).mouseover();//手动设置事件

      //滑动停止动画,滑出开发动画

      a.hover(function(){

        clearInterval(adTimer);

      },function(){

        setInterval(function(){

          if(opt.direction == 'top'){

              topshowImg(index);

              index--;

              if(index<0){index=len-1;}

          }else{

            bottomshowImg(index);

              index++;

              if(index==len){index=0;}

          }

        },opt.slideshowSpeed)

      }).trigger("mouseleave");

    };

　　//向上切换

    topshowImg = function(index){

      var adHeight = a.height();

      s.stop(true,false).animate({top : -adHeight*index},opt.animationSpeed);

      c.removeClass("on").eq(index).addClass("on");

    }
//向下切换

    bottomshowImg = function(index){

      var adHeight = a.height();

      s.stop(true,false).animate({bottom: -adHeight*index},opt.animationSpeed);

      c.removeClass("on").eq(index).addClass("on");

    }

    slider();

  }

})(jQuery);

$(function(){

  $('.content_right .ad').webjoy({slideshowSpeed:2000,animationSpeed:1000,direction:'top'});

});

</script>

</head>

<body>

<div class="content_right">

  <div class="ad" >

    <ul class="slider" >

    <li ><a href="#"><img src="http://pic002.cnblogs.com/images/2011/334763/2011120516434445.jpg" width="573" height="257" /></a></li>

    <li ><a href="#"><img src="http://pic002.cnblogs.com/images/2011/334763/2011120516440935.jpg" width="573" height="257" /></a></li>

    <li ><a href="#"><img src="http://pic002.cnblogs.com/images/2011/334763/2011120516443665.jpg" width="573" height="257" /></a></li>

    <li ><a href="#"><img src="http://pic002.cnblogs.com/images/2011/334763/2011120516445513.jpg" width="573" height="257" /></a></li>

    </ul>

    <ul class="num" >

      <li>1</li>

      <li>2</li>

      <li>3</li>

      <li>4</li>

    </ul>

  </div>

</div>

</body>

</html>

jQuery 写的插件图片上下切换幻灯效果的更多相关文章

  1. 基于jQuery带标题的图片3D切换焦点图

    今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...

  2. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  3. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  4. jQuery框架开发一个最简单的幻灯效果

    在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果

  5. 用css来写一个背景图片的切换

    代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...

  6. jQuery滑过头像图片展示个人信息效果

    这是一款经典的jQuery图片插件,同时,也可以是一款jQuery提示框插件.这款jQuery插件的功能是当你把鼠标滑过头像图片缩略图时,即可弹出头像对应用户的详细个人信息,弹出的标签虽然不大,但是还 ...

  7. liMarquee – jQuery无缝滚动插件（制作跑马灯效果）

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  8. 利用jquery写的一个TAB页切换效果

    函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...

  9. 自己写了一个图片的马赛克消失效果(jQuery)

    其中的一个效果: html代码: <h1>单击图片,产生效果</h1> <div class="box"></div> 插件代码: ...

随机推荐

  1. 【系统】CentOS、Ubuntu、Debian三个linux比较异同

    CentOS.Ubuntu.Debian三个linux比较异同 2014-07-31 12:58             53428人阅读             评论(6)             ...

  2. C++多态公有继承

    面向对象的三个基本特征 面向对象的三个基本特征是:封装.继承.多态.其中,封装可以隐藏实现细节,使得代码模块化:继承可以扩展已存在的代码模块(类):它们的目的都是为了——代码重用.而多态则是为了实现另 ...

  3. javascript动态添加form表单元素

    2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主 ...

  4. codeforces 467C.George and Job 解题报告

    题目链接:http://codeforces.com/problemset/problem/467/C 题目意思:给出一条含有 n 个数的序列,需要从中找出 k 对,每对长度为 m 的子序列,使得 找 ...

  5. ubuntu下Tomcat7的安装和配置

    和前几个软件一样,Tomcat 同样是由JAVA开发的,所以,在安装前一定要装好JDK. 大家可以到 http://tomcat.apache.org/download-70.cgi 下载最新的Tom ...

  6. 告别div，可以代替div的几个标签

    几个最常用的用来代替DIV的HTML5元素 虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是 ...

  7. MySQL主备库切换(MHA)演练与总结

      演练包括被动切换和主动切换两部分.被动切换是主库宕机,主动切换是人工手动触发.   演练步骤大致如下:       1 先停掉主库,模拟主库宕机     2 mha将vip切到备库,备库变成主库, ...

  8. c++ static及const（开发者在线）

    static 是c++中很常用的修饰符,它被用来控制变量的存储方式和可见性,下面我将从 static 修饰符的产生原因.作用谈起,全面分析static 修饰符的实质. static 的两大作用: 一. ...

  9. java 学习之路

    一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http://www.jcp.org/en/jsr/detail?id=133 http://i ...

  10. ***微信公众平台开发： 获取用户基本信息+OAuth2.0网页授权

    本文介绍如何获得微信公众平台关注用户的基本信息,包括昵称.头像.性别.国家.省份.城市.语言.本文的方法将囊括订阅号和服务号以及自定义菜单各种场景,无论是否有高级接口权限,都有办法来获得用户基本信息, ...