原生js重写《锋利的JS》之 轮播效果

<!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="images/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="images/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="images/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="images/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="images/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                    <li><a href="#"><img src="images/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                    <li><a href="#"><img src="images/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                    <li><a href="#"><img src="images/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                    <li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                    <li><a href="#"><img src="images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                    <li><a href="#"><img src="images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                    <li><a href="#"><img src="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》之 轮播效果

时间： 2024-09-30 04:33:11

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

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

原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body

js的轮播效果

图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 960px; height: 400px; o

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

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

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

详细内容请点击 点击这里查看效果: http://hovertree.com/texiao/js/1.htm HTML文件代码如下:  <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS图片自动和可控的轮播切换特效 - 何问起 HoverTree</ti

JS实现焦点图轮播效果

大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到欣慰 ! 好吧,其实说白了就是穷,就是没钱,就是不能好好地任性,所以只能先去慕课网找教程学习把它给做出来! OK,首先将HTML结构搭建好先: <div id="container"> <div id="list" style="left:

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

网站——如何实现轮播效果

实现轮播效果需要运用到的知识: DOM操作 定时器 事件运用 Js动画 函数递归 无限滚动 原理:控制图片列表的“left”值来显示相应的图片 组成部分<div id="container">: <div id="list">//图片列表 <div id="list" style="left:-600px">//当图片的宽度全部为600px时 <img src=""

基本_移动类型轮播效果_框架

一.基本元素: D:display window;用户浏览的窗口: S:scroll window;存放内容的大容器:通过移动来改变显示的内容: C:content;内容信息: B:button;按钮,多种样式,可选: 二.思路: 通过移动S 的位置,由于C位于S中,所有的C将会同时跟随S而移动. 在D中显示的内容将会被改变. 三.html结构: 1 <div class=”D”> 2 <div class=”S”> 3 <div class=”C”>content&l

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &