使用javascript,jquery实现的图片轮播功能
本功能采用最基础的javascript和一些简单的jquery技术实现，易理解，以修改使用，代码简易，适合刚开始接触到网站开发的朋友们参考。可以直接把代码copy下来，放入一个html 文件即可，然后把jquery文件放在同一个文件夹下就可以了。
文件下载地址：http://download.csdn.net/detail/xyytcs/5037545

<!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>

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<style type="text/css">

#picplayer{overflow:hidden;clear:none;margin:0px;width:754px; height:380px; z-index:0;}

#piccontent img{display:none;width:100%;height:100%;}

#picbtnHolder{position:absolute;top:360px; left:138px;height:20px;z-index:1;}

#picbtns span{cursor:pointer; width:80px;text-align:center; border:solid 1px #ccc;background-color:#eee; display:inline-block;}

</style>

<script type="text/javascript">

    function initImg() {

        $("#piccontent img").css("display", "none");

        $("#picbtns span").css("background-color", "#eee");

        $("#picbtns span").css("color", "Black");

    }

    function showImg(index) {

        $("#piccontent img:eq(" + index + ")").css("display", "block");

        $("#picbtns span:eq(" + index + ")").css("background-color", "Black");

        $("#picbtns span:eq(" + index + ")").css("color", "#fff");

    }

    var index = 1;

    setInterval(changeImg, 3000);

    function changeImg() {

        initImg();

        var imgSum = $("#picbtns >span").length;

        if (index == imgSum) {

            index = 0;

        }

        showImg(index);

        index++;

    }

    $(function () {

        $("#picbtns span").each(

                function (index) {

                    $("#picbtns span:eq(" + index + ")").hover(

                        function (oEvent) {

                            initImg();

                            showImg(index);

                        },

                        function (oEvent) {

                        }

                    );

                }

            );

    });

</script>

</head>

<body>

<div id="picplayer">

    <div id="piccontent"><!--要保留一个图片默认显示，以免设定的时间没有到之前图片会空白显示-->

        <a href="http://www.baidu.com" target="_blank"><img id="picitem1" style="display: block;" src="http://image.xzyd.net/66/image/ad/20121221/20121221123200.jpg" /></a>

        <a href="http://www.baidu.com" target="_blank"><img id="picitem2" src="http://image.xzyd.net/66/image/ad/20121221/20121221123028.jpg" /></a>

        <a href="http://www.baidu.com" target="_blank"><img id="picitem3" src="http://image.xzyd.net/66/image/ad/20121221/20121221123143.jpg" /></a>

        <a href="http://www.baidu.com" target="_blank"><img id="picitem4" src="http://img04.taobaocdn.com/imgextra/i4/822486065/T2ueijXipcXXXXXXXX_!!822486065.jpg" /></a>

        <a href="http://www.baidu.com" target="_blank"><img id="picitem5" src="http://img02.taobaocdn.com/imgextra/i2/822486065/T2iH0vXjVNXXXXXXXX_!!822486065.jpg" /></a>

        <a href="http://www.baidu.com" target="_blank"><img id="picitem6" src="http://img04.taobaocdn.com/imgextra/i4/822486065/T2vI2bXnFXXXXXXXXX_!!822486065.jpg" /></a>

    </div>

    <div id="picbtnHolder">

         <div id="picbtns">

         <!--增加图片对应的按钮-->

            <span id="picbtn1" style="background-color:Black;color:#fff;">1 </span>

            <span id="picbtn2">2 </span>

            <span id="picbtn3">3 </span>

            <span id="picbtn4">4</span>

            <span id="picbtn5">5 </span>

            <span id="picbtn6">6 </span>

         </div>

    </div>

 </div>

</body>

</html>

使用javascript,jquery实现的图片轮播功能的更多相关文章

  1. 个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

  2. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  3. 原生Js_使用setInterval() 方法实现图片轮播功能

    用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  4. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  5. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  6. js/jquery中实现图片轮播

    一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  7. JQuery slidebox实现图片轮播

    jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...

  8. JavaScript对象(document对象 图片轮播)

    图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  9. JQuery插件开发初探——图片轮播

    在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...

随机推荐

  1. Mysql5.7的gtid主从半同步复制和组复制

    (一)gtid主从半同步复制 一.半同步复制原理 mysql默认的复制是异步的,主库在执行完客户端提交的事务后会立即将结果返回给客户端,并不关心从库是否已经接收并处理,这样就会有一个问题,主库如果cr ...

  2. 【css样式生成 & 图片合并压缩工具】Sprite，你值得拥有

    好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...

  3. [QT][SQLITE]学习记录一 querry 查询

    使用 QSqlQuery query ; query("SELECT id FROM TABLE1 WHERE id = '2017'); 的到的结果集就是query本身,此时需要使用 qu ...

  4. flask第二十六篇——模板【控制语句】【2】

    如果你也在学flask,就请加船长的公众号:自动化测试实战 我们先补充一下for循环的知识,我们之前说过,flask是由Jinja2+sqlAlchemy+werkzeug组成的,我们现在学的控制语句 ...

  5. MSMQ向远程服务器发送消息----错误总结

    一:路径错误(Path)错误 如果向远程服务器发送消息,请使用格式名的形式,如: FormatName:Direct=TCP:121.0.0.1\\private$\\queueFormatName: ...

  6. FastAdmin 环境变量 env 配置

    FastAdmin 环境变量 env 配置 目前 FastAdmin 支持环境变量 env 配置. 目前支持以下环境变量 app.debug app.trace database.type datab ...

  7. windows php下memcache+memcached安装与配置

    环境声明: 服务器:Windows7 64-bit:Memcached:Memcached 64-bit for Windows(64位) 安装过程 解压刚刚下载的压缩包,得到两个文件:memcach ...

  8. java System.arrayCopy使用说明

    java System.arrayCopy使用说明 java.lang.System.arraycopy() 方法复制指定的源数组的数组,在指定的位置开始,到目标数组的指定位置. 下面是 System ...

  9. 关于Fragment框架，说的够清晰了。。。

    Android4.0-Fragment框架实现方式剖析(一) 分类: Android UI 2012-09-19 18:59 14880人阅读 评论(8) 收藏 举报 android   目录(?)[ ...

  10. spring的定时任务配置（注解）

    参考博客: http://www.jb51.net/article/110541.htm http://blog.csdn.net/wxwzy738/article/details/25158787 ...