纯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 ...
随机推荐
- NSUrl的打印
1转自 http://my.oschina.net/wangdk/blog/165554: NSURL *url = [NSURL URLWithString:@"http://www.ba ...
- C#类遍历
foreach语句的基本用法大家都应该知道,就是对对象进行遍历,取出相应的属性名称或属性值.Foreach(for)用法在js中使用很简单,基本如下: var objA={name:'mayday', ...
- Python之SQLAlchemy学习--外键约束问题
以下问题赞为解决: # class User(Base):# __tablename__ = 'user'# #表的结构# id = Column(String(20), primary_key=Tr ...
- c语言指针占几个字节
指针即为地址,指针几个字节跟语言无关,而是跟系统的寻址能力有关,譬如以前是16为地址,指针即为2个字节,现在一般是32位系统,所以是4个字节,以后64位,则就为8个字节. 可以在自己的电脑上测试下: ...
- java mail发送邮件
最近做了自动发送邮件功能,带附件的:需要的jar包有
- Myeclipse 找不到Convert to maven project选项
https://my.oschina.net/u/2419190/blog/504417 Window > Preferences > General > Capabilities ...
- Evolutionary Computing: 3. Genetic Algorithm(2)
承接上一章,接着写Genetic Algorithm. 本章主要写排列表达(permutation representations) 开始先引一个具体的例子来进行表述 Outline 问题描述 排列表 ...
- linux笔记：用户和用户组管理-用户配置文件
用户信息文件(/etc/passwd): 影子文件(/etc/shadow) 组信息文件(/etc/group)和组密码文件(/etc/gshadow):
- sql数剧操作语言
结构化查询语言SQL(STRUCTURED QUERY LANGUAGE)是最重要的关系数据库操作语言,并且它的影响已经超出数据库领域, 得到其他领域的重视和采用,如人工智能领域的数据检索,第四代软件 ...
- LR参数化后取值规则小记
对参数化的取值,只有一个用户的情况能分清,但是多用户多迭代就搞不懂,特意使用Parameter List中自带的参数化模拟器Simulate Parameter进行简单的实验,3条数据 + 4个用户 ...