<!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. 快速传输大数据（tar+lz4+pv）

    快速传输大数据(tar+lz4+pv)   如果用传统SCP远程拷贝,速度是比较慢的.现在采用lz4压缩传输.LZ4是一个非常快的无损压缩算法,压缩速度在单核300MB/S,可扩展支持多核CPU.它还 ...

  2. 面向侧面的程序设计AOP-------《一》概述

    Aspect-Oriented Programming(面向方面编程,AOP)正好可以解决这一问题.它允许开发者动态地修改静态的OO模型,构造出一个能够不断增长以满足新增需求的系统,就象现实世界中的对 ...

  3. POJ 3083

    ---恢复内容开始--- http://poj.org/problem?id=3083 题目大意就是给你要你从S走到E,且只有.代表的地方才是可以走的,有三种方式的走法. 一.是向左优先转,从S到E的 ...

  4. XP下使用IIS访问asp出现无权查看网页问题的解决办法

    这是用户权限问题,因为你用的磁盘是NTFS格式. 解决方法: 一.添加用户(“Everyone”或者“IUSR_你的机器名”,如IUSR_HONG,即“Internet 来宾用户”) 二.修改用户权限 ...

  5. [Android Pro] 内容提供者ContentProvider的基本使用

    一.ContentProvider简介 当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.ContentProvider为存储和获取数据提 ...

  6. 数列（codevs 1141）

    题目描述 Description 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13 ...

  7. Android之智能问答机器人

    本文主要利用图灵机器人的接口,所做的一个简单的智能问答机器人 实现 由于发送与接收消息都是不同的listView,所以要用有两个listVeiw的布局文件 接收消息布局文件 <?xml vers ...

  8. js 带省略号的分页源码及应用实例

    一.js:pagination.js /*--说明分页div id为:changpage*/var eachPageDataNum = 10;//每页显示记录数var nowPage = 1;//当前 ...

  9. 消息队列入门（四）ActiveMQ的应用实例

    >>部署和启动ActiveMQ 去官网下载:http://activemq.apache.org/ 我下载的是apache-activemq-5.12.0-bin.tar.gz, 解压到本 ...

  10. iOS开发网络篇—GET请求和POST请求(转)

    一.GET请求和POST请求简单说明 创建GET请求 1 // 1.设置请求路径 2 NSString *urlStr=[NSString stringWithFormat:@"http:/ ...