纯js轮播效果（减速效果）待改进
HTML代码
<!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" />
<meta name="viewport" content="width=device-width,user-scalable=no" /><title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="js.js"></script> </head>
<body>
<div class="z_box">
<div id="move"></div>
</div> <div id="z_body">
<ul id="sImg">
<li><img src="1.jpg" width="600" height="300" /></li>
<li><img src="2.jpg" width="600" height="300" /></li>
<li><img src="3.jpg" width="600" height="300" /></li>
<li><img src="4.jpg" width="600" height="300" /></li>
<li><img src="5.jpg" width="600" height="300" /></li>
<li><img src="6.jpg" width="600" height="300" /></li>
</ul>
<span id="z_prev"></span>
<span id="z_next"></span>
<ul id="sNav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div> </body>
</html>
CSS样式
*{
margin:0px;
padding:0px;
}
li{
list-style:none;
}
.z_box{
width:100%;
height:100px;
position:relative;
left:50px;
box-shadow:0px 0px 5px gray;
}
#move{
width:100px;
height:100px;
position:absolute;
box-shadow:0px 0px 5px blue;
left:0px;
}
#z_body{
width:600px;
height:300px;
margin:0 auto;
overflow:hidden;
box-shadow:0px 0px 5px black;
position:relative;
}
#z_body ul#sImg{
height:300px;
position:absolute;
z-index:;
}
#z_body ul#sImg li{
float:left;
width:600px;
height:300px;
border:2px solid blue;
}
#z_prev{
width:30px;
height:30px;
box-shadow:0px 0px 5px blue;
display:block;
position:absolute;
left:10px;
top:45%;
z-index:;
cursor:pointer;
}
#z_next{
width:30px;
height:30px;
box-shadow:0px 0px 5px blue;
display:block;
position:absolute;
right:10px;
top:45%;
z-index:;
cursor:pointer;
}
#z_body span:hover{
background:#eee;
box-shadow:0px 0px 5px yellow;
}
#sNav{
width:100%;
height:30px;
position:absolute;
bottom:0px;
left:0px;
text-align:center;
z-index:;
}
#sNav li{
display:inline;
padding:2px 10px;
box-shadow:0px 0px 5px red;
margin-left:10px;
cursor:pointer;
}
#sNav li:hover{
background:white;
box-shadow:0px 0px 5px blue;
}
.getWidth{
width:100px;
height:100px;
border:1px solid red;
}
JS代码
//
window.onload=function(){ var oDiv=document.getElementById("move");
var oDiv1=document.getElementById("z_body");
var oUl=oDiv1.getElementsByTagName("ul");
var oLi=oUl[0].getElementsByTagName("li");
//左右按钮初始化
var oPrev=document.getElementById("z_prev");
var oNext=document.getElementById("z_next");
//小导航初始化
var oNav=document.getElementById("sNav");
var nLi=oNav.getElementsByTagName("li");
//计算移动的距离
var mWidth=oLi[0].offsetWidth;
//当前索引值
var k=0;
//要用offsetWidth 不然在li上加入border会出现错误
//oUl[0].style.width=parseInt((oLi[0],"width"))*oLi.length+"px";
oUl[0].style.width=oLi[0].offsetWidth*oLi.length+"px";
//初始化小按钮当前样式
nLi[0].style.background="gray";
function sMove(obj,iTarget,vSpeed){
var speed=0;
var timer=0; clearInterval(obj.timer);
obj.timer=setInterval(function(){
speed=speed>0? Math.ceil((iTarget-obj.offsetLeft)/5):Math.floor((iTarget-obj.offsetLeft)/5);
//if(obj.offsetLeft==iTarget){
if(speed==0){
clearInterval(obj.timer);
console.log("停止运动!")
}else{
console.log("正在运动...");
obj.style.left=obj.offsetLeft+speed+"px";
}
//给小按钮添加当前选中样式
if(k<=nLi.length-1 && k!=0){
nLi[(k-1)].style.background="";
nLi[k].style.background="gray";
}else{
nLi[nLi.length-1].style.background="";
nLi[k].style.background="gray";
}
},vSpeed); } //自动切换函数
function autoPlay(obj,innerTime,iTar){ setTimeout(function(){ if(k==oLi.length-1){
k=0;
}else{
k++;
}
sMove(obj,-k*mWidth,25);
},innerTime); } //开启自动切换
var iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500); //左右按钮事件
oPrev.onclick=function(){
if(k>0){
sMove(oUl[0],-(k-1)*mWidth,25);
k--;
}else{
k=oLi.length-1;
sMove(oUl[0],-k*mWidth,25);
}
console.log("点击按钮后的k=="+k);
}; oNext.onclick=function(){
if(k<oLi.length-1){
sMove(oUl[0],-(k+1)*mWidth,25);
k++;
}else{
sMove(oUl[0],-(0*mWidth),25);
k=0;
}
console.log("点击按钮后的k=="+k); }; //左右按钮悬浮事件
oNext.onmouseover=function(){
clearInterval(iTimer);
};
oNext.onmouseout=function(){
iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);
};
oPrev.onmouseover=function(){
clearInterval(iTimer);
};
oPrev.onmouseout=function(){
iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);
}; //鼠标悬浮小按钮
oNav.onmouseover=function(){
clearInterval(iTimer);
};
oNav.onmouseout=function(){
iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);
}; //小按钮点击事件
for(var i=0;i<nLi.length;i++){
nLi[i].index=i;
nLi[i].onclick=function(){
sMove(oUl[0],-this.index*mWidth,25);
for(var j=0;j<nLi.length;j++){
nLi[j].style.background="";
}
nLi[this.index].style.background="gray";
k=this.index;
};
} }; //获取计算后的样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //IE
}else{
return getComputedStyle(obj,null)[attr];
}
}
效果虽然已经完成 但是 还有很多地方需要改进 望大家批评指教！
纯js轮播效果（减速效果）待改进的更多相关文章
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- 纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图
基于js和css,跟着网上的视频教程,结合自己想要的效果,做出了一个类似于淘宝海报的效果. 如图:淘宝首页 自己做的: 代码: <!DOCTYPE html> <html> & ...
- 纯js轮播图
<div id="wrapper"> <div id="container"> <img src="http://ima ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化
之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...
- 纯css3 轮播图 利用keyframes
效果: 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好 总共花费的 animation-duration:time 与每帧延延迟的时间的交错:要让 ...
- JS轮播图（网易云轮播图）
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
随机推荐
- [问题2014S02] 复旦高等代数II（13级）每周一题（第二教学周）
问题2014S02 设实系数多项式 \begin{eqnarray*}f(x) &=& a_nx^n+a_{n-1}x^{n-1}+\cdots+a_1x+a_0, \\ g(x) ...
- 20 个值得一试的JavaScript 框架
投递人 itwriter 发布于 2011-09-26 17:46 评论(3) 有1956人阅读 原文链接 [收藏] « » 本文介绍 20 个值得一试的 JavaScript 框架,如果你认为答 ...
- 【Unity基础知识之三】Unity Assets目录下的特殊文件夹名称
Unity3D的特殊目录名称 Unity预留了一些目录名称,这些目录有着特殊的含义.比较重要的有: Resources这个目录下的所有文件都会被打包到发布版本中,程序可以通过文件路径来访问它们.这 ...
- Cheatsheet: 2016 02.01 ~ 02.29
Web How to do distributed locking Writing Next Generation Reusable JavaScript Modules in ECMAScript ...
- Maven学习（一） -- 安装Maven及Eclipse中配置Maven
标签(空格分隔): 学习笔记 本文环境:Windows7, JDK1.7.0_76 安装及配置Maven环境变量 需要电脑中已经有Java环境 在控制台中输入:echo %JAVA_HOME%看是否能 ...
- DSO转换规则的Aggregation默认为覆盖MOV
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 深入浅出设计模式——工厂方法模式（Factory Method）
介绍在简单工厂模式中,我们提到,工厂方法模式是简单工厂模式的一个延伸,它属于Gof23中设计模式的创建型设计模式.它解决的仍然是软件设计中与创建对象有关的问题.它可以更好的处理客户的需求变化. 引入我 ...
- day 2
三目运算符 A?B:C 等价于 if(A) B; else C; 实例: int i: i=(3>2?5:1) //如果3>2为真,i的值为5,否则为1 printf(“%d”,i): ...
- Android Studio常见问题 -- uses-sdk:minSdkVersion 8 cannot be smaller than version 9 declared in library
问题描述 * What went wrong:Execution failed for task ':app:processDebugManifest'.> Manifest merger fa ...
- python的ujson与simplejson
一.使用了simplejson import simplejson as json 二.使用ujson import ujson as json 参考链接:下载win下的:ujson