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

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

<title></title>

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

<style type="text/css">

*{ margin:0; padding:0;}

body{ background:#fff; color:#333; font:12px/1.5em Helvetica,Arial,sans-serif}

h1,h2,h3,h4,h5,h6{ font-size:1em;}

a{ color:#2b93d2; text-decoration:none;}

a:hover{ color:#e31e1c; text-decoration:underline;}

ul{ list-style:none;}

img{ border:none;}

.v_show{ width:595px; margin:20px 0 1px 60px;}

.v_caption{ height:35px; overflow:hidden; background:url(images/btn_cartoon.gif) no-repeat 0 0;}

.v_caption h2{ float:left; width:84px; height:35px; overflow:hidden; background:url(images/btn_cartoon.gif) no-repeat; text-indent:-9999px;}

.v_caption .cartoon{background-position:0 -100px;}

.v_caption .variety{ background-position:-100px -100px;}

.highlight_tip{ display:inline; float:left; margin:14px 0 0 10px;}

.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;}

.highlight_tip .current{ background-position:0 -220px;}

.change_btn{ float:left; margin:7px 0 0 10px;}

.change_btn span{ display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(images/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer;}

.change_btn .prev{ background-position:0 -400px;}

.change_btn .next{ width:31px; background-position:-30px -400px;}

.v_caption em{ display:inline; float:right; margin:10px 12px 0 0; font-family:simsun;}

.v_content{ position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; border-left:1px solid #e7e7e7;}

.v_content_list{ position:absolute; width:2500px; top:0px; left:0px;}

.v_content ul{ float:left;}

.v_content ul li{ display:inline; float:left; margin:10px 2px 0; padding:8px;}

.v_content ul li a{ display:block; width:128px; height:80px; overflow:hidden;}

.v_content ul li img{ width:128px; height:96px;}

.v_content ul li h4{ width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal;}

.v_content ul li h4 a{ display:inline !important; height:auto !important;}

.v_content ul li span{ color:#666;}

.v_content ul li em{ color:#888; font-family:Verdana; font-size:0.9em;}

</style>

</head>

<body>

    <div class="v_show">

        <div class="v_caption">

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

            <div class="highlight_tip">

                <span class="current">1</span><span>2</span><span>3</span><span>4</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><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

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

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

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

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

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

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

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

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

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

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

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

                    <li><a href="#"><img src="data:images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                    <li><a href="#"><img src="data:images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                    <li><a href="#"><img src="data:images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                    <li><a href="#"><img src="data:images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                </ul>

            </div>

        </div>

    </div>

</body>

</html>

$(function(){

    var page = 1;

    var i = 4;

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

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

        var $v_show = $parent.find("div.v_content_list");

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

        var v_width = $v_content.width();

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

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

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

            if(page == page_count){

            $v_show.animate({left : "0px"},"slow");

            page = 1;

            }else{

                $v_show.animate({ left : "-=" + v_width},"slow");

                page++;

            }

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

        }  

    });

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

         var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素

    　　var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”

    　　var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域

    　　var v_width = $v_content.width();

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

    　　var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数

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

             　　if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。

            $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");

            page = page_count;

           　　 }else{

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

                    　　page--;

            　　}

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

         　　}

    });

})

看起来代码很多很复杂，但其实思路很简单，就是获取左右按钮，绑定单击事件，

在事件里面，再判断图片展示框的位置，然后切换到要切换的位置，这个可以通过

改变obj.style.left属性实现，那怎么知道要移动多少呢？可以获取他实际的展示框

宽度，再定义一个计数器，标明已移动到的位置，两者相乘，就是最后实际上的位

置。还是直接通过代码解释吧。

window.onload = function(){

    var next = getElementsByClassName("next")[0];    //获取下一页按钮

    var prev = getElementsByClassName("prev")[0];    //获取上一页按钮

    var v_content = getElementsByClassName("v_content")[0];     //获取展示框，方便在下面取得它的宽度

    var v_list = getElementsByClassName("v_content_list")[0];      //实际存放所有图片的容器

    var v_span = getElementsByClassName("highlight_tip")[0].getElementsByTagName("span");    //装饰标识

    var v_width = v_content.clientWidth;     //得到展示框的宽度

    var i = 4;      //每次展示的图片数，这里是4

    var len = document.getElementsByTagName("li").length;    //获取图片总数

    var pageCount = Math.ceil(len/i);    //图片总数除以每次展示的图片数，可以得出总共需要展示多少次

    var page = 0;    //默认设置为第0页

    var t;    //计时器句柄，用于清除计时器

    next.onclick = function(){

        if(t){

            clearInterval(t);    //如果存在，也就是说，动画有执行过，先清除，以免与下面的要执行的动画造成冲突或者形成动画排队效果

        }

        if(page == pageCount - 1){         //当到达最后一页时，将动画移动到最后，并将页数标识设置为初始0

            t = animate(v_list,{left:v_list.offsetLeft},{left:-v_list.offsetLeft - 0},500,Quad);

            page = 0;

        }else{

            page++;   //否则，当前页面自增1，下面进行动画移动

            t = animate(v_list,{left:v_list.offsetLeft},{left:(-page * v_width - v_list.offsetLeft)},500,Quad);

        }

        for(var i = 0,l = v_span.length; i < l; i++){    //循环遍历标识，并设置标识

            v_span[i].className = '';

        }

        v_span[page].className = "current";

    }

    prev.onclick = function(){   //同上

        if(t){

            clearInterval(t);

        }

        if(page == 0){

            t = animate(v_list,{left:v_list.offsetLeft},{left:(-pageCount + 1) * v_width},500,Quad);

            page = 3;

        }else{

            page--;

            t = animate(v_list,{left:v_list.offsetLeft},{left:(-page * v_width - v_list.offsetLeft)},500,Quad);

        }

        for(var i = 0,l = v_span.length; i < l; i++){

            v_span[i].className = '';

        }

        v_span[page].className = "current";

    }

}

function Quad(start,alter,curTime,dur){

  return start+Math.pow(curTime/dur,2)*alter;   //动画算法函数

}

function animate(obj,start,alter,dur,fx){   // 【动画执行函数】

   var curTime = 0;

   var interval = setInterval(function(){

       if(curTime >= dur){

           clearInterval(interval);

       }

       for(var i in start){

           obj.style[i] = fx(start[i],alter[i],curTime,dur) + "px";

       }

       curTime += 50;

   },50);

   return interval;

}

function getElementsByClassName(className,node){    //通过类名获取节点函数

    node = node || document;

    if(node.getElementsByClassName){

        return node.getElementsByClassName(className);

    }

    var eles = node.getElementsByTagName('*');

    var reg = [];

    for(var i = 0,l = eles.length; i < l; i++){

        if(hasClass(className,eles[i])){

            reg.push(eles[i]);

        }

    }

    return reg;

}

function hasClass(className,node){    //判断有无某类名函数，在此是上面的函数需要

    var eles = node.className.split(/\s+/);

    for(var i = 0,l = eles.length; i < l; i++){

        if(eles[i] == className){

            return true;

        }

    }

    return false;

}

原生js重写《锋利的JS》之 轮播效果的更多相关文章

  1. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  2. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  3. JS实现网页背景旋转缩放轮播效果

    实现效果:效果预览 css代码: .switch_images { display: inline-block; margin:; padding:; width: 100%; height: 100 ...

  4. 使用js制作一般网站首页图片轮播效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JS案例之2——cycle元素轮播

    元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...

  6. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  7. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  8. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  9. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  10. js的轮播效果

    图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...

随机推荐

  1. Windows下编译live555源码

    Windos下编译live555源码 环境 Win7 64位 + VS2012 步骤 1)源码下载并解压 在官网上下载最新live555源码,并对其进行解压. 2)VS下建立工程项目 新建Win32项 ...

  2. Linux下程序的机器级表示学习心得

    Linux下程序的机器级表示学习心得 上周学习完Linux程序的机器级表示后,对于其中有些还是掌握的不太透彻.对于老师提出的关于本章一些细节的问题还是有不会,所以又重新温习了一下上周的学习内容,以下为 ...

  3. 20145335郝昊《Java程序设计》第2周学习总结

    20145335郝昊<Java程序设计>第2周学习总结 教材学习内容总结 一.类型.变量与运算符 1.类型 整数: 可细分为为short整数(占2字节),int整数(占4字节),long整 ...

  4. 20135320赵瀚青LINUX内核分析第三周学习笔记

    赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 概述 本周是学习的主要是构造 ...

  5. 【Network Architecture】Feature Pyramid Networks for Object Detection(FPN)论文解析（转）

    目录 0. 前言 1. 博客一 2.. 博客二 0. 前言   这篇论文提出了一种新的特征融合方式来解决多尺度问题, 感觉挺有创新性的, 如果需要与其他网络进行拼接,还是需要再回到原文看一下细节.这里 ...

  6. 算数基本定理 - nefu 118

    算数基本定理 每个大于1的正整数都可以被唯一分解为素数的成绩,在乘积中的素因子按照非降序排列 a = p1^a1 * p2^a2 * ... pn^an; b = p1^b1 * p2^b2 * .. ...

  7. Python学习札记(二十) 函数式编程1 介绍 高阶函数介绍

    参考: 函数式编程 高阶函数 Note A.函数式编程(Functional Programming)介绍 1.函数是Python内建支持的一种封装,我们通过一层一层的函数调用把复杂任务分解成简单的任 ...

  8. geoserver源码学习与扩展——跨域访问配置

    在 geoserver源码学习与扩展——restAPI访问 博客中提到了geoserver的跨域参数设置,本文详细讲一下geoserver的跨域访问配置. geoserver的跨域访问依赖java-p ...

  9. PHP5.6版本安装redis扩展

    一.php安装redis扩展   1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本       2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...

  10. Hive 导入、导出数据

    <------ 导入 ------> 从本地目录文件导入Hive表 语法:LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABL ...