效果如下：

代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>图片切换</title>

<style>

.pics {width:300px; height:100px; border:solid 1px gray; overflow: hidden; position: relative;}

.pics li {float:left; list-style-type:none;}

.pics ul, #pics ul li {margin:0; padding:0;}

.pics ul {position: absolute; left: 0; top:0; width:10000px;}

.pics img {width:300px; height:100px;}

.pics .divTip {position: absolute; left:10px; bottom:10px;}

.pics .divTip span {float: left; display:block; opacity:0.9; border-radius:5px; width:8px; height:8px; margin-right:5px; background-color:white; border:solid 1px #eee;}

.pics .divTip .active {background-color:gray;}

</style>

<script src="js/jquery.js"></script>

</head>

<body>

<div id="pics1" class="pics">

<ul>

<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>

<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>

<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>

<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>

</ul>

</div>

<div id="pics2" class="pics">

<ul>

<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>

<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>

<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>

<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>

</ul>

</div>

<script>

$.fn.extend({

    ///这个函数是全部选择所有的元素

    switchPic: function(delayMs, runMs) {

        // oid runMs delayMs

        var o = {};

        o.itemWidth = this.width();

        o.runMs = runMs || 500;

        o.delayMs = delayMs || 2000;

        o.obj = this;

        o.index = -1;

        o.count = this.find('li').size();

        o.isHover = false;

        var html = '<div class="divTip">';

        for (var i=0; i<o.count; i++) html += '<span data-i="' + i + '"></span>';

        html += '</div>';

        this.append(html);

        o.fnAuto = function()

        {

            if (o.isHover) return;

            o.index++;

            if (o.index == o.count) o.index = 0;

            o.fnIndex(o.index);

        }

        o.fnIndex = function (i)

        {

            o.index = i;

            o.obj.find('.divTip span').removeClass('active');

            o.obj.find('.divTip span').eq(o.index).addClass('active');

            o.obj.find('ul').stop();

            o.obj.find('ul').animate({left:'-' + (o.index * o.itemWidth) + 'px'}, o.runMs);

        }

        window.setInterval(o.fnAuto, o.delayMs);

        o.fnAuto();

        this.hover(function(){

            o.isHover = true;

        },function(){

            o.isHover = false;

        });

        this.find('.divTip span').mouseover(function(){

            o.fnIndex($(this).data('i'));

        });

    }

});

$('#pics1').switchPic(1000, 100);

$('#pics2').switchPic();

</script>

</body></html>

下载地址：http://files.cnblogs.com/zjfree/switchPic.rar

js 图片切换效果的更多相关文章

  1. JS图片切换效果

    源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  2. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  3. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

  4. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  5. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  6. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  7. 100种不同图片切换效果插件pageSwitch

    分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览   源码下载 实现的代码. ht ...

  8. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

  9. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

随机推荐

  1. hdu 2665 Kth number

    划分树 /* HDU 2665 Kth number 划分树 */ #include<stdio.h> #include<iostream> #include<strin ...

  2. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  3. leetcode 110 Balanced Binary Tree ----- java

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  4. JavaWeb学习记录（二十二）——模式字符串与占位符

    一.Java代码案例 @Test    public void test10(){        int planet=7;        String event="a disturban ...

  5. CString用法总结

    概述:CString是MFC中提供的用于处理字符串的类,是一种很有用的数据类型. 它很大程度上简化了MFC中的许多操作,使得MFC在做字符串操作时方便了很多. 不管怎样,使用CString有很多的特殊 ...

  6. HDU 2717 Catch That Cow --- BFS

    HDU 2717 题目大意:在x坐标上,农夫在n,牛在k.农夫每次可以移动到n-1, n+1, n*2的点.求最少到达k的步数. 思路:从起点开始,分别按x-1,x+1,2*x三个方向进行BFS,最先 ...

  7. poj1062 最短路

    题意:有n个物品,任务是得到1号物品,现在每个物品有它的主人,你可以用金钱购买物品,当然也可以用其他物品加上优惠的价格换取,但是有个要求,因为每个物品的主人有各自的等级,你所交易过的人中,等级差不能超 ...

  8. CSS 通用原子类

    /*文字排版*/.f10 { font-size: 10px; }.f11 { font-size: 11px; }.f12 { font-size: 12px; }.f13 { font-size: ...

  9. C#的157个建议--读书笔记（一）

    操作符的重载 ----实现类对象可以像值类型那样进行操作符的操作 实现比较器(IComparable)---实现对象的排序方式 协变:让返回值类型返回比声明的类型派生程度更大的类型:协变支持的两种方式 ...

  10. caffe: test code 执行出问题： Check failed: FLAGS_weights.size() > 0 (0 vs. 0) Need model weights to score.

    Check failed: FLAGS_weights.size() > 0 (0 vs. 0) Need model weights to score. 出现这个错误,但是我记得昨天还好好的, ...