<!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. Redis使用介绍

    Redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类keyvalue存储的不足,在部 分场合可以对关系数据库起到很好的补充作用.它提供了Pyth ...

  2. mac os x查看端口命令

    `netstat` 命令 a. `netstat -nat | grep <端口号>` 转自: http://my.oschina.net/foreverich/blog/402252

  3. #define 的一些用法 以及 迭代器的 [] 与 find()函数的区别

    #include "stdafx.h" #include <map> #include <string> #include <iostream> ...

  4. 正则表达式里"-"中划线的使用注意

    今天要匹配正则表达式,把非法的字符找出来,开始的写法是这个 [^A-Za-z0-9_.*-+%!],我的目的是把_.*-+%!这7个字符算合法字符,但是发现有许多其他字符也合法了,原来是中划线的位置不 ...

  5. Java for LeetCode 140 Word Break II

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  6. [小细节,大BUG]记录一些小问题引起的大BUG(长期更新....)

    [小细节,大BUG] 6.问题描述:当从Plist文件加载数据,放入到tableView中展示时,有时有数据,有时又没有数据.这是为什么呢?相信很多大牛都想到了:我们一般将加载的数据,转换成模型,放入 ...

  7. LightOJ 1247 Matrix Game (尼姆博弈)

    A - Matrix Game Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submi ...

  8. 原创centos7安装hadoop2.7(转载请注明出处)

    启用ip vi /etc/sysconfig/network-scripts/ifcfg-ONBOOT=yes 编辑DNS /etc/resolv.conf nameserver 114.114.11 ...

  9. Emblog 备忘

    emblog换后台:(如admin-->xx) 1.xx目录下的globals.php打开找到替换admin(1) 2.www目录下的t\index.php 中找到替换admin(1) 3.ww ...

  10. （六）STM32的时钟系统

    在STM32中,一共有5个时钟源,分别是HSI.HSE.LSI.LSE.PLL (1) HSI是高速内部时钟,RC振荡器,频率为8MHz: (2) HSE是高速外部时钟,可接石英/陶瓷谐振器,或者接外 ...