<!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. 在python3下使用OpenCV 抓取摄像头图像并实时显示3色直方图

    以下代码为在Python3环境下利用OpenCV 抓取摄像头的实时图像, 通过OpenCV的 calHist函数计算直方图, 并显示在3个不同窗口中. import cv2 import numpy ...

  2. 在Pycharm中配置Github

    Pycharm是当前进行python开发,尤其是Django开发最好的IDE.GitHub是程序员的圣地,几乎人人都在用. 本文假设你对pycharm和github都有一定的了解,并且希望在pycha ...

  3. Web安全学习笔记之Nmap脚本编写

    0x00 Nmap脚本简介 夜无眠,看了一下Nmap官方的英文API文档(全是English),瞬间心态崩塌,不想吐槽它们的nmap官网前端太丑了=.=,但是都是大牛啊,挺敬佩开源开发者的. Nmap ...

  4. spring项目gitignore

    target/ ### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans ### Intel ...

  5. struts2中各个jar包作用 （转）

    Struts2.3.4 所需的Jar包及介绍 Jar包的分类 jar包名称 jar包版本 jar包 文件名 jar包 的作用 jar包内包含的主要包路径及主要类 依赖的自有jar包名称 依赖的第三方j ...

  6. 数据结构实习 Problem H 迷宫的最短路径

    数据结构实习 Problem H 迷宫的最短路径 题目描述 设计一个算法找一条从迷宫入口到出口的最短路径. 输入 迷宫的行和列m n 迷宫的布局 输出 最短路径 样例输入 6 8 0 1 1 1 0 ...

  7. 位运算 进制转化 STL中bitset用法

    2017-08-17 16:27:29 writer:pprp /* 题目名称:输入十进制以二进制显示 程序说明:同上 作者:pprp 备注:无 日期:2017/8/17 */ #include &l ...

  8. Gogeos安装

    环境要求: Windows64,Go,minGW(统一64位) 1.安装geos 下载GEOS 3.3.8源码,解压后,按readme文件编译(基于VS2010的64位编译工具执行的nmake编译命令 ...

  9. Mysql数据库实用语句集

    mysql实用语句 (1).从第0行开始取,取3行(一般用于分页)select * from student limit 0,3 (2).查看当前数据库编码 show variables like ' ...

  10. Restore IP Addresses，将字符串转换成ip地址

    问题描述: Given a string containing only digits, restore it by returning all possible valid IP address c ...