原生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="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》之 轮播效果的更多相关文章
- JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- JS实现网页背景旋转缩放轮播效果
实现效果:效果预览 css代码: .switch_images { display: inline-block; margin:; padding:; width: 100%; height: 100 ...
- 使用js制作一般网站首页图片轮播效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS案例之2——cycle元素轮播
元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- 针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- js的轮播效果
图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...
随机推荐
- netty6---序列化与反序列化
package com.cn; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import ja ...
- iOS开发之XMPPFramework环境搭建和配置
1.mysql数据库安装和配置 官方下载地址:http://www.mysql.com/downloads/ 百度云盘地址: 安装软件参考:http://www.cnblogs.com/macro-c ...
- HttpWebRequest 返回BadRequest(400) 同时返回Response
今天用Fiddler分析安卓APP的一个登陆功能的时候,账号和密码错误会返回相应的消息,并且状态码是400. 正常用法: /// <summary> /// 读取返回的内容 /// < ...
- [Deep Learning]任意层cnn的matlab版本实现
之前实现了一层的卷积神经网络,又实现了两层的卷积神经网络,接下来把cnn扩展到任意层就不难了. 这难道就是传说中的“道生一,一生二,二生三,三生万物”么?＝.＝ 代码还是在github上. 比较有趣的 ...
- springboot 监控
一.什么是spring-boot-starter-actuator(doc) springboot项目如何检查配置与运行状态呢?官方提供了一些接口可以查看springboot项目运行情况,只需要导入s ...
- c语言数据类型字节长度
突然间就想到了long和int到底什么区别(发现有很多问题都是突然间想到的),然后百度.google各种查找,各种书籍:<C++ Primer>.<C程序设计语言>查看,终于明 ...
- 求生之路 Hammer World Editor打开后闪退解决办法
试过WinXp.Win7.Win10 都无法正常启动Hammer,搜索N多资料后发现如图修改 控制面板 -> 区域 -> 格式 -> 英语[美国] 即可正常启动了!!!
- Jquery11 动画效果
学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 在以前很长一段时间里,网页上的各种特效还需要采用 flash 在进行. ...
- Mac下需要安装的一些软件及常用的配置文件
常用软件配置文件 1..gitconfig # This is Git's per-user configuration file. [user] name = 张文 email = zhangwen ...
- random模块中最常用的几个函数
转自:http://www.cnblogs.com/yd1227/archive/2011/03/18/1988015.html 随机整数:>>> import random> ...