网站首页没有一点动画怎么可以，我以前用过Flash As3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，IE8不兼容模式下 设置有透明效果的div 样式添加失效了，但是我用谷歌，IE8兼容测试都ok。

　　反正是给自己记录的，也不多话了，js没有与页面分离，也没有做出插件。一个网站要不了几个这种效果，先实现了再说吧。最后的效果还是很高大上的。

下载地址：http://files.cnblogs.com/xiaoshuai1992/PicChange.zip

页面+JS代码

<script type="text/javascript">

        var picCurrent = 1;

        var picTotal = 8;

        var interval; //自动运行

        function picChange(current) {

            //停止当前动画

            if ($("#divImg").is(":animated")) { $("#divImg").stop(); }

            picCurrent = current;

            //为当前选择的设置样式

            $("#divLink").find("a").removeClass("picselect")

            $("#divLink").find("a[title='" + picCurrent + "']").addClass("picselect");

            //设置下面的图片说明

            var remark = "<a href=\"images/pic" + picCurrent + ".jpg\">";

            switch (picCurrent) {

                case 1: remark += " 菊花〔拉丁学名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊属多年生草本... "; break;

                default: remark += picCurrent + "测试说明"; break;

            }

            remark += "</a>";

            $("#picremark").html(remark);

            //运行动画

            $("#divImg").animate({ left: -((picCurrent - 1) * 1000) + "px" }, "1000");

            return false;

        }

        //暂不需使用

        function PicPer() {

            if (picCurrent > 1) {

                picCurrent--;

            }

            else {

                picCurrent = picTotal;

            }

            picChange(picCurrent);

        }

        //下一张

        function PicNext() {

            if (picCurrent == picTotal) {

                picCurrent = 1

            }

            else {

                picCurrent++;

            }

            picChange(picCurrent);

        }

        //自动切换图片

        function PicRun(functionName) {

            picChange(1);

            interval = setInterval(PicNext, "3000");

        }

        $(document).ready(function () {

            PicRun();

        });

    </script>
<!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="jquery-1.8.0.js" type="text/javascript"></script>

    <link href="picchange.css" rel="stylesheet" type="text/css" />

    </head>

<body>

    <div class="picMain">

        <div class="picimg" id="divImg">

            <img src="data:images/pic1.jpg" class="pic" />

            <img src="data:images/pic2.jpg" class="pic" />

            <img src="data:images/pic3.jpg" class="pic" />

            <img src="data:images/pic4.jpg" class="pic" />

            <img src="data:images/pic5.jpg" class="pic" />

            <img src="data:images/pic6.jpg" class="pic" />

            <img src="data:images/pic7.jpg" class="pic" />

            <img src="data:images/pic8.jpg" class="pic" />

        </div>

        <div class="picaction" id="divLink">

            <a href="images/pic8.jpg" title="8" onclick=" return picChange(8)" class="">8</a> <a href="images/pic7.jpg"

                title="7" onclick=" return picChange(7)">7</a> <a href="images/pic6.jpg" title="6"

                    onclick=" return picChange(6)">6</a> <a href="images/pic5.jpg" title="5" onclick=" return picChange(5)">

                        5</a> <a href="images/pic4.jpg" title="4" onclick=" return picChange(4)">4</a>

            <a href="images/pic3.jpg" title="3" onclick=" return picChange(3)">3</a> <a href="images/pic2.jpg"

                title="2" onclick=" return picChange(2)">2</a> <a href="images/pic1.jpg" title="1"

                    onclick=" return picChange(1)" class="">1</a>

        </div>

        <div id="picremark" class="picRemark">

            测试介绍文件了啊</div>

    </div>

</body>

</html>

css的实现

.picMain

{

    margin: auto;

    overflow: hidden;

    width: 1000px;

    height: 400px;

    position: relative;

}

.picimg

{

    width: 10000px;

    height: 400px;

    background-color: #000000;

    position: absolute;

    top: 0px;

}

.picRemark

{

    position: absolute;

    width: 500px;

    height: 50px;

    bottom: 0px;

    left: 0px;

    color: #FFFFFF;

    text-indent: 2em;

}

.picRemark a

{

    color: #FFFFFF;

    text-decoration: none;

}

.picRemark a:hover

{

    text-decoration: underline;

}

.picaction

{

    position: absolute;

    width: 1000px;

    height: 50px;

    background-color: #000000;

    filter: alpha(opacity=50);

    -moz-opacity: 0.5;

    opacity: 0.5;

    overflow: auto;

    bottom: 0px;

    left: 0px;

    text-align: right;

}

.picaction a

{

    border: 1px solid #C0C0C0;

    width: 30px;

    height: 30px;

    float: right;

    line-height: 30px;

    text-decoration: none;

    text-align: center;

    color: #FFFFFF;

    font-weight: bold;

    margin-top: 10px;

    display: block;

    margin-right: 10px;

}

.pic

{

    width: 1000px;

    height: 400px;

    float: left;

}

.picselect

{

    background-color: #919191;

}

Jquery 学习之路（四）高大上的图片轮换的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. Redis——学习之路四（初识主从配置）

    首先我们配置一台master服务器,两台slave服务器.master服务器配置就是默认配置 端口为6379,添加就一个密码CeshiPassword,然后启动master服务器. 两台slave服务 ...

  3. jQuery学习笔记（四）jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  4. jQuery 学习之路（1）：引子

    一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...

  5. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  6. jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  7. jQuery学习之路（3）- 事件

    ▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...

  8. jQuery 学习之路（2）：选择器与过滤器

    一.基本选择器 标签选择器: $('button') ID选择器: $('#id1') 类选择器: $('.class1') 多重选择器: $('#id1,.class1,button') 全体选择器 ...

  9. zigbee学习之路(四):按键控制(中断方式)

    一.前言 通过上次的学习,我们学习了如何用按键控制led,但是在实际应用中,这种查询方式占用了cpu的时间,如果通过中断控制就可以解决这个问题,我们今天就来学习按键控制的中断方式. 二.原理分析 传统 ...

随机推荐

  1. 传统IT七大职业的云计算转型之路

    毫无疑问,对于那些传统IT技术--企业架构师.系统管理者.测试验收工程师或者网络工程师等开发人员骑身到云计算行业不仅是大势所趋,也能为其带来工作的保证,薪酬也更加丰厚. 如今,企业上云已经成为不可阻挡 ...

  2. PowerDesigner工具箱(palette)关了如何重新打开

    PowerDesigner的设计工具箱palette,palette的实际意思:颜料.调色板 工具箱关闭了 重新打开的方法其实很简单的,贴几张图片上来,帮助一下大家 方法一: 在工具栏的空白处点击鼠标 ...

  3. requests快速入门

    Requests 是唯一的一个非转基因的 Python HTTP 库,人类可以安全享用. 警告:非专业使用其他 HTTP 库会导致危险的副作用,包括:安全缺陷症.冗余代码症.重新发明轮子症.啃文档症. ...

  4. 【转】深入理解Java中的String

    原文链接:http://www.cnblogs.com/xiaoxi/p/6036701.html 一.String类 想要了解一个类,最好的办法就是看这个类的实现源代码,来看一下String类的源码 ...

  5. ElasticSearch1.7.1拼音插件elasticsearch-analysis-pinyin-1.3.3使用介绍

    ElasticSearch拼音插件elasticsearch-analysis-pinyin使用介绍 https://my.oschina.net/xiaohui249/blog/214505 摘要: ...

  6. 【bzoj2809】[Apio2012]dispatching 贪心+可并堆

    题目描述 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.在这个帮派里,有一名忍者被称之为 Master.除了 Master以外,每名忍者都有且仅有一个上级.为保密,同时增 ...

  7. 颜色采集器colpick Color Picker

    简单 RGB.HSB.十六进制颜色选取器 jQuery 插件. 非常直观类似 Photoshop 的界面. 光明和黑暗很容易自定义 CSS3 外观. 28 KB 总由浏览器加载看起来不错甚至在 IE7 ...

  8. Citrix Netscaler版本管理和选择

    Citrix Netscaler版本管理和选择 来源 http://blog.51cto.com/caojin/1898164 随着Citrix Netscaler的快速发展,有很多人在维护设备时经常 ...

  9. 从零开始学习MXnet（四）计算图和粗细粒度以及自动求导

    这篇其实跟使用MXnet的关系不大,但对于我们理解深度学习的框架设计还是很有帮助的. 首先还是对promgramming models的一个简单介绍,这个东西实际上是在编译里面经常出现的东西,我们在编 ...

  10. [fzu 2273]判断两个三角形的位置关系

    首先判断是否相交,就是枚举3*3对边的相交关系. 如果不相交,判断包含还是相离,就是判断点在三角形内还是三角形外.两边各判断一次. //http://acm.fzu.edu.cn/problem.ph ...