<!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. [转]手把手教你搭建Hive Web环境

    了解Hive的都知道Hive有三种使用方式——CLI命令行,HWI(hie web interface)浏览器 以及 Thrift客户端连接方式. 为了体验下HWI模式,特意查询了多方的资料,都没有一 ...

  2. Android利用方向传感器获得手机的相对角度实例说明

    http://www.jb51.net/article/37710.htm 1.android 的坐标系是如何定义x, y z 轴的 x轴的方向是沿着屏幕的水平方向从左向右,如果手机不是正方形的话,较 ...

  3. linux卸载mysql

    第二.停止MYSQL运行以及卸载老版本 service mysqld stop #暂停MYSQL yum remove mysql mysql-*  #卸载老版本MYSQL 通过上面的命令,我们先停止 ...

  4. 负载均衡技术在CDN中发挥着重要作用

    转载地址:http://www.qicaispace.com/gonggao/server/page01/info07.asp CDN是一个经策略性部署的整体系统,能够帮助用户解决分布式存储.负载均衡 ...

  5. RabbitMQ的安装及集群搭建方法

    RabbitMQ安装 1 安装erlang 下载地址:http://www.erlang.org/downloads 博主这里采用的是otp_src_19.1.tar.gz (200MB+) [roo ...

  6. 分享个基于 Node.js + React 的博客系统

    是使用 ES2015+ 特性写的,使用了 ThinkJS 框架,后台使用了 React. 完全使用 Markdown 来写文章,还可以把文章推送到团队博客系统中(团队博客也需要使用该系统). 项目地址 ...

  7. 教你如何挑选深度学习GPU【转】

    本文转载自:https://blog.csdn.net/qq_38906523/article/details/78730158 即将进入 2018 年,随着硬件的更新换代,越来越多的机器学习从业者又 ...

  8. [BZOJ2733]永无乡

    Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...

  9. 多线程资源隔离之ThreadLocal

    上篇讲到多线程线程安全问题的解决思路,这篇将详细讲解资源隔离ThreadLocal的实践. ThreadLocal也叫线程局部变量,类似Map结构,以当前线程为key.既然是以资源隔离的思想保证线程安 ...

  10. 爬虫框架Scrapy之Settings

    Settings Scrapy设置(settings)提供了定制Scrapy组件的方法.可以控制包括核心(core),插件(extension),pipeline及spider组件.比如 设置Json ...