//锋利的jQuery幻灯片实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            font-size: 12px;

        }

        .v_show {

            width: 592px;

            margin: 20px 0px 0 30px;

            border: 1px solid #ccc;

        }

        .v_caption {

            width: 592px;

            height: 40px;

            line-height: 40px;

            overflow: hidden;

            background: url("images/btn_cartoon.gif") repeat-x;

        }

        .cartoon {

            float: left;

            width: 85px;

            margin-right: 10px;

            background: url("images/btn_cartoon.gif") 0px -100px no-repeat;

            text-indent: -9999px;

        }

        .highlight_tip {

            float: left;

            padding-top: 16px;

            margin-right: 10px

        }

        .highlight_tip span.current {

            background: url("images/btn_cartoon.gif") 0px -220px;

        }

        .highlight_tip span {

            display: inline;

            float: left;

            width: 7px;

            height: 7px;

            overflow: hidden;

            margin: 0 2px;

            background: url(images/btn_cartoon.gif) no-repeat 0 -320px;

            text-indent: -9999px;

        }

        .change_btn {

            float: left;

            overflow: hidden;

            width: 65px;

            padding-top: 8px;

        }

        .change_btn span.prev {

            display: block;

            float: left;

            width: 30px;

            height: 23px;

            background: url("images/btn_cartoon.gif") 0px -400px no-repeat;

            text-indent: -9999px;

        }

        .change_btn span.next {

            display: block;

            float: left;

            width: 30px;

            height: 23px;

            background: url("images/btn_cartoon.gif") -30px -400px no-repeat;

            text-indent: -9999px;

        }

        .v_caption em {

            float: right;

            padding-right: 10px;

        }

        .v_caption em a {

            font-size: 12px;

            text-decoration: none;

            color: #2B93D2;

        }

        .v_content {

            position: relative;

            height: 160px;

            overflow: hidden;

        }

        .v_content_list {

            height: 160px;

            width: 2500px;

            position: absolute;

            left: 0;

            top: 0;

        }

        .v_content_list ul {

            list-style: none;

        }

        .v_content_list li {

            float: left;

            margin: 10px 5px 0;

            padding: 5px;

        }

        .v_content_list li a {

            display: block;

            width: 128px;

            height: 80px;

            overflow: hidden;

        }

        .v_content_list h4 {

            margin-top: 10px;

            color: #2B93D2;

        }

    </style>

    <script src="js/jquery-1.11.3.min.js"></script>

    <script>

        $(function () {

            var page = 1;//初始版面为1

            var i = 4;//每个版面放四张图片

            $(".next").click(function () {

                var $parent = $(this).parents(".v_show");

                var $contentlist = $parent.find(".v_content_list");

                var $content = $parent.find(".v_content");//left位置要变换的盒子

                var v_width = $content.width();//获取到盒子的宽度

                var len = $contentlist.find("li").length;//获取到li的个数

                var pagecount = Math.ceil(len / i);//最多能够放四张版面

               if(!$contentlist.is(":animated")){

                   if(page==pagecount){//若是第四个版面

                       $contentlist.animate({left: '0px'}, "slow")//改变left位置，返回为第一个版面

                       page=1;

                   }else{

                       $contentlist.animate({left: '-=' + v_width}, "slow")//v_width向左减宽度

                       page++;

                   }

               }

               $(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current");

            })

            $(".prev").click(function () {

                var $parent = $(this).parents(".v_show");

                var $contentlist = $parent.find(".v_content_list");

                var $content = $parent.find(".v_content");

                var v_width = $content.width();

                var len = $contentlist.find("li").length;

                var pagecount = Math.ceil(len / i);

                if(!$contentlist.is(":animated")){

                    if(page==1){

                        $contentlist.animate({left: '-='+v_width*(pagecount-1)}, "slow");//改变为第四个版面

                        page=4;

                    }else{

                        $contentlist.animate({left: '+=' + v_width}, "slow")

                        page--;

                    }

                }

                $(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current")

            })

        })

    </script>

    <script></script>

</head>

<body>

<div class="v_show">

    <div class="v_caption">

        <h2 class="cartoon" alt="卡通动漫">卡通动漫</h2>

        <div class="highlight_tip">

            <span class="current">0</span><span>1</span><span>2</span><span>3</span>

        </div>

        <div class="change_btn">

            <span class="prev">上一个</span><span class="next">下一个</span>

        </div>

        <em><a href="#">更多>></a></em>

    </div>

    <div class="v_content">

        <div class="v_content_list">

            <ul>

                <li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>

                <li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>

            </ul>

        </div>

    </div>

</div>

</body>

</html>

锋利的jQuery幻灯片实例的更多相关文章

  1. 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器

    <锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...

  2. lightslider-支持移动触摸的轻量级jQuery幻灯片插件

    插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...

  3. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  4. 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  5. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  6. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  7. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  8. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  9. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

随机推荐

  1. HDU 6047 Maximum Sequence(线段树)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=6047 题目: Maximum Sequence Time Limit: 4000/2000 MS (J ...

  2. Android源码博文集锦4

    Android精选源码 一款常见的自定义加载动画 android开源记账项目CoCoin Android自定义view:拖拽选择按钮 Android指纹识别 一个折线图,它提供了几个非常实用的功能 一 ...

  3. java迭代器浅析

    简介 迭代器是遍历容器的一种常用方法,它屏蔽了容器的实现细节,无需暴露数据结构内部,就可以对容器进行遍历,迭代器本身也是一种设计模式,迭代是一种特殊的遍历方式 Iterator 在java中,迭代器接 ...

  4. zabbix分布式监控的部署

    zabbix是一个分布式监视,管理系统,基于server-clinet架构,可用于监视各种网络服务,服务器和网络机器等状态. server端基于C语言,web管理端Frontend则是基于PHPA制作 ...

  5. recycleView 使用指南1

    最近看了很多 recycleView 的使用文章,一直晕乎乎的,完全不知道套路是啥.很多人都是直接上代码,但是却没有详细说明代码的使用,于是打算自己写写,理理思路.顺便帮助那些正在学习 android ...

  6. <Mastering KVM Virtualization>：第二章 KVM内部原理

    在本章中,我们将讨论libvirt.QEMU和KVM的重要数据结构和内部实现.然后,我们将深入了解KVM下vCPU的执行流程. 在这一章,我们将讨论: libvirt.QEMU和KVM的内部运作方式. ...

  7. 关于MFC实时的视频处理

    最近老师,让我做一下关于视频处理方面的一个项目,在实时处理这里实在是卡住了太长时间,因为不知道如何使用多线程来进行实时检测,终于有点眉目,来写个笔记记录一下. 首先需要介绍一下关于项目的背景,做一个人 ...

  8. 重定向URL

    重定向的原因有哪些?[1]网址变更了[2]权限不够 [1]网址变更了 [举例]以google为例,之前我们可以访问www.google.cn,但是后来Z.F不让我们访问它了,那么google公司为了避 ...

  9. Shell - 简明Shell编程

    本文是对Shell脚本编程的总结和回顾,所有涉及的脚本均已做了基本的调试和验证. [toc] 测试环境信息 [root@CentOS7 ~]# uname -a Linux CentOS7 3.10. ...

  10. 修改maven的默认JDK

    在我们实际使用IDEA开发maven项目的时候,创建maven项目的默认版本是jdk1.5,当然我们可以通过其他手段去修改module的JDK版本,或JDK的编译级别等等,但是如果每次你都这样修改,那 ...