<!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. ubuntu14.04安装dropbox

    官网地址: https://www.dropbox.com/install?os=lnx 自己的系统如果没有设置全局翻(qiang)代理,使用deb文件安装后不能直接使用,因为还需要到官网安装prop ...

  2. Valid Perfect Square

    Given a positive integer num, write a function which returns True if num is a perfect square else Fa ...

  3. CSS本页写样式

    <style type="text/css">p{ color:#ff0000; font-size:24px; font-family:"隶书"; ...

  4. MySQL自带information_schema数据库使用

    MySQL的information_schema数据库是什么,有什么作用? 大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个 information_schema数据库.info ...

  5. iOS 利用constraint实现2个控件上下的空白是相等的

    说的有点乱,先看个图把 其实这个constrant的目的就是控制两个方形的控件上方和下方的空白大小. 对于每一个方块来说,他们上方和下方的空白是相同的.这种“居中”的设计到处可见.一个控件想实现这种居 ...

  6. 手动创建第一个JSP应用

    当按照上一篇文章所说的,配置好了tomcat服务器之后,我们就可以开发运行在tomcat上的第一个web应用了,在对tomcat的目录了解之后,我们知道webapps是存放我们编写相应应用程序的目录, ...

  7. codeforces 471C.MUH and House of Cards 解题报告

    题目链接:http://codeforces.com/problemset/problem/471/C 题目意思:有 n 张卡,问能做成多少种不同楼层(floor)的 house,注意这 n 张卡都要 ...

  8. openGL纹理映射参数解析

    GLuinttexture[1]; AUX_RGBImageRec *TextureImage[1]; Status=TRUE; // Set The Status To TRUE glGenText ...

  9. ASP.Net核心对象HttpRequest

    描述context. Request["username"]; 通过这种方式,能够得到一个HttpRequest对象.HttpRequest对象描述了,关于请求的相关信息,我们可以 ...

  10. redhat6.2下的ssh密钥免密码登录（原创）

    这个是我自己写的,鼓励转载,请说明转载地址:http://www.cnblogs.com/nucdy/p/5664840.html 在进行hadoop的免密码的登录操作是,老是发生no route等错 ...