纯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 ...
随机推荐
- [问题2015S13] 复旦高等代数 II（14级）每周一题（第十四教学周）
[问题2015S13] 设 \(A=(a_{ij})\) 为 \(n\) 阶实矩阵, 定义函数 \[f(A)=\sum_{i,j=1}^na_{ij}^2.\] 设 \(P\) 为 \(n\) 阶非 ...
- Linux 概念架构的理解
摘要 Linux kernel 成功的两个原因: 架构设计支持大量的志愿开发者加入到开发过程中: 每个子系统,尤其是那些需要改进的,都支持很好的扩展性. 正是这两个原因使得 Linux kernel ...
- c++ 指针常量，常量指针
当const遇到指针 一般来说,const修饰指针可以分为下面的集中情况. 描述 例子 含义 备注 const在*的左边 const int *b=&a; int const *b=& ...
- 【UFLDL】Exercise: Convolutional Neural Network
这个exercise需要完成cnn中的forward pass,cost,error和gradient的计算.需要弄清楚每一层的以上四个步骤的原理,并且要充分利用matlab的矩阵运算.大概把过程总结 ...
- Spring+Mybatis 手动控制事务
public boolean testDelete(String jobCode) throws Exception { boolean flag = false; //1.获取事务控制管理器 Dat ...
- Circular progress bar in Unity 3D
Circular progress bar in Unity 3D - UnityScripthttp://stackoverflow.com/questions/22662706/circular- ...
- NodeJS学习笔记 - Express4.x路由操作
一.为Express添加about路由 1.新建js文件,about.js 2.打开about.js,并输入以下代码: var express=require('express'); var rout ...
- Python 代码优化常见技巧
代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化.扩展以及文档相关的事情通常需要消耗 80% 的工作量.优化通常包含两方 ...
- investopedia level 2
Mispricing can be explained by the sum of the two components: true mispricing and estimation errorVe ...
- FileUpload V2.1详细
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...