<!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. AndroidStudio 使用AIDL

    http://blog.csdn.net/ducklikejava/article/details/51559244 Android Studio中写的一个AIDL的小DEMO. 步骤很繁琐,本来不准 ...

  2. 【c++ primer, 5e】特殊用途语言特性

    [默认实参] 1.注意点:函数的默认实参可以在函数的声明中添加,但是后续声明只能添加默认参数而不能改变先前声明的默认参数.(函数的声明通常是定义在头文件上的,多次声明同一个函数是合法的) 2.默认实参 ...

  3. Django学习笔记之Cookie、Session和自定义分页

    cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

  4. saltstack1

    saltstack三种运行模式: local本地.master/minion(类似于agent).salt ssh saltstack三大功能: 远程执行.配置管理.云管理 saltstack安装:1 ...

  5. ipvs+ldirectord实现高可用ipvs

    一.heartbeat准备 1.接上文 2. 安装heartbeat-ldirectord组件包 [root@node1 heartbeat]# -.el6.x86_64.rpm 3.ldirecto ...

  6. Elasticsearch之几个重要的分词器

    前提 什么是倒排索引? Elasticsearch之分词器的作用 Elasticsearch之分词器的工作流程 Elasticsearch之停用词 Elasticsearch之中文分词器 Elasti ...

  7. LeetCode——largest-rectangle-in-histogram1

    Question Given n non-negative integers representing the histogram's bar height where the width of ea ...

  8. LightOJ 1356 Prime Independence（质因数分解+最大独立集+Hopcroft-Carp）

    http://lightoj.com/login_main.php?url=volume_showproblem.php?problem=1356 题意: 给出n个数,问最多能选几个数,使得该集合中的 ...

  9. 使用httpclient提交表单数据加号（+）会被自动替换成空格的坑

    坑的场景: 今天使用httpclient-4.5.3版本,发送如下报文: { "idNo": "7+6+0+2ce722a546b39463bd62817fe57f8&q ...

  10. 《用 Python 学微积分》笔记 3

    <用 Python 学微积分>原文见参考资料 1. 16.优化 用一个给定边长 4 的正方形来折一个没有盖的纸盒,设纸盒的底部边长为 l,则纸盒的高为 (4-l)/2,那么纸盒的体积为: ...