纯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 ...
随机推荐
- rmi远程调用
1.在服务器端程序中的spring-servlet.xml中添加 <bean id="userService" class="org.springframework ...
- LabelControl文本居中显示
https://www.devexpress.com/Support/Center/Question/Details/Q94915 If you set the AutoSizeMode to Non ...
- Hadoop简介
原来:计算效率低 现在:成本降低,能用PC机,就不用大型机和高端存储了:软件容错硬件故障视为常态,通过软件保证可靠性:简化并行分布式计算,无需控制节点同步和数据交换,但是谷歌只发表了相关技术论文,没有 ...
- iOS - Mac OS X 终端设置
Mac OS X 终端设置 1)Finder 中显示资源库 方法一: 在 "终端" 中输入下面的命令: 显示: chflags nohidden ~/Library/ 隐藏: ch ...
- Android handler 详解（面试百分之100问到）
handler在Android中被称为“消息处理者”,在多线程中比较常用. handler内部实现原理 handler实现机制:1,Message对象,表示要传递的一个消息,内部使用链表数据结构实现一 ...
- C#虚方法
若一个实例方法声明前带有virtual关键字,那么这个方法就是虚方法.虚方法与非虚方法的最大不同是,虚方法的实现可以由派生类所取代,这种取代是通过方法的重写实现的(以后再讲)虚方法的特点:虚方法前不允 ...
- Bootstrap3.0学习教程十七：JavaScript插件模态框
这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...
- apache log4j日志工具使用入门[maven 项目配置]
简单的介绍下Maven项目中有关org.apache.log4j.Logger的使用.[1]首先我们需要找到 org.apache.log4j.Logger的坐标,并配置到POM.xml <de ...
- css布局左右技巧分享
无意之间发现左右侧布局很多技巧在里边,接下来分享下实例: <div style="width:40px;height:36px;float:left;overflow:hidden; ...
- jquery事件代理
在jQuery中,事件代理是指:把事件绑定到父级元素,然后等待事件通过DOM冒泡到该元素时再执行. 在事件侦听过程中有两种触发事件的方式:事件捕获和事件冒泡.事件冒泡更快,效率更高. 事件捕获:事件在 ...