<!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. 【Spring】Spring系列2之bean的配置

    2.bean的配置 2.1.IOC概述 2.2.bean的获取 2.3.依赖注入方式 2.4.属性注入细节 内部bean,不需要ID,ID无效,外部不能引用: 2.5.集合属性注入 2.6.使用p命名 ...

  2. Windows命令行提取日期时间

    参考: http://elicecn.blog.163.com/blog/static/174017473200931910320556/ SET str="%date:~0,4%%date ...

  3. Dynamic Web Module 3.0 requires Java 1.6 or newer

    在maven工程的pom.xml文件中加入如下代码: 在<build>里面加入如下代码: <plugins> <plugin> <groupId>org ...

  4. sockaddr struct 类型重定义

    windows.h和winsock2.h有类型重定义我是知道的,本来就一个库来说没问题,把winsock2放到windows.h前或先定义WIN32_LEAN_AND_MEAN都能解决问题但现的出了问 ...

  5. codeforces A. Flipping Game 解题报告

    题目链接:http://codeforces.com/problemset/problem/327/A 题意是输入一个只有0和1的序列,要求找出一个合理的区间,在这个区间里面把0变成1,1变成0,使得 ...

  6. git revert 用法

    git revert 撤销 某次操作,此次操作之前和之后的commit和history都会保留,并且把这次撤销作为一次最新的提交    * git revert HEAD                ...

  7. discuz 学习

    一.Discuz首页“今日”“昨日”“欢迎新会员”等文字删除添加 搜索templeta/default/forum/discuz.htm   (使用非默认模版的请修改当前使用模版的discuz.htm ...

  8. LINUX安全设置

    3. 为单用户引导加上密码   在“/etc/lilo.conf”文件中加入三个参数:time-out,restricted,password.这三个参数可以使你的系统在启动lilo时就要求密码验证. ...

  9. 解决iphone5，5s有锁版（AU,SB,S版等等）ios7越狱后+86、FT、IM等一切问题

    最近无聊,给大家发一个关于完美解决iphone5,5c.5s有锁版本机号码.+86.短信.facetime.imessage等问题.是ios7系统哦!(本人亲测iphone5 SB版 双模卡解锁)相当 ...

  10. 元素查找（codevs 1230）

    1230 元素查找  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 给出n个正整数,然后有m个询问,每 ...