使用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. OMAP4之DSP核（Tesla）软件开发学习（一）

    目的:       目前手上正在OMAP4上做东西,由于涉及到大量运算,交给arm A9双核发现运算速度很慢,不能满足需求.故考虑将大量运算任务(比如FIR.FFT.卷积.图像处理.向量运算等)交给O ...

  2. Hosts 文件的作用

    问题来源: 我修改了hosts文件访问公司的内网  但是出现错误找不到服务器或DNS错误  一个下午了都上不了公司的系统. Hosts是什么?Hosts是Window系统目录里的一个文件,它的作用可大 ...

  3. Linux运维学习笔记-文件权限知识总结

    权限总结: 1. 可读r:表示具有读取\阅读文件内容的权限: 2. 可写w:表示具有新增.修改文件内容的权限: a. 若果没有r配合,那么vi编辑文件会提示无法编辑(但可以强制编辑),echo可以重定 ...

  4. HTML save data to CSV or excel

    /********************************************************************************* * HTML save data ...

  5. WebService 初步入门的理解

    先说明 我不是高手 我是菜鸟  也在不断学习的过程  记录下来这些是让自己总结的学习  毕竟我做的时候也是摸索前进的 我没有深入 我是入门摸索 前两天的时候做一个微信的开发的 要用到我们公司微信服务号 ...

  6. 使用caddy 进行nodejs web应用近实时编译更新

    caddy 相比nginx 是一个不错的轻量代理服务器,支持的功能也是比较多的, 同时插件也挺多 demo 测试的是通过git 插件进行一个使用spec-md 编写的文档近实时编译以及预览 项目使用d ...

  7. ORA-01033: ORACLE initialization or shutdown in progress --手动删除表空间 DBF 后无法登陆问题

    进入CMD,执行set ORACLE_SID=fbms,确保连接到正确的SID: 2.执行sqlplus "/as sysdba" SQL>shutdown immediat ...

  8. centos6.6 myphpadmin

    基本环境为:Centos6.6+Apache2.2.15+php5.3.3+Mysql5.1.73 开始下载了网站上最新版本myPhpAdmin4.3.8安装后打开浏览器为空白页,后百度后都讲是与PH ...

  9. linux 使用中括号进行条件判断

       格式 “#”代表空格,不可缺少 [# param1#op# param2 #] 这种带比较操作符的形式,op左右必须使用空格隔开. 如 [# “3”==”2” #]  这种缺少空格的写法会得到结 ...

  10. Java File文件操作 创建文件\目录，删除文件\目录

    Java手册 java.io 类 File java.lang.Object java.io.File 所有已实现的接口: Serializable, Comparable<File> p ...