纯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 ...
随机推荐
- [问题2015S05] 复旦高等代数 II（14级）每周一题（第六教学周）
[问题2015S05] 设 \(A\) 是 \(n\) 阶复方阵, 证明: \(A\) 可对角化的充分必要条件是 \(A\) 相似于某个如下的循环矩阵: \[C=\begin{pmatrix} a_ ...
- [问题2014S03] 解答
[问题2014S03] 解答 设 \(A\) 的 \(n\) 个特征值分别为 \(\lambda_1,\lambda_2,\cdots,\lambda_n\), 由条件知它们都是不等于零的实数. 根 ...
- 首师大附中科创教育平台 我的刷题记录 0325 50212228海岛帝国：LYF的太空运输站
今天给大家献上“D”级题:50212228海岛帝国:LYF的太空运输站!! 试题编号:0325 50212228海岛帝国:LYF的太空运输站 难度级别:D: 运行时间限制:40ms: 运行 ...
- Linux Shell 批量更换文件名或后缀名
把下列所有.c的文件名修改为.cc rename .c .cc *.c
- IOS_改变UITextField placeHolder颜色、字体
http://blog.sina.com.cn/s/blog_671d2e4f0101d90v.html
- 使用window.print实现网页打印
Window.print()方法用于在浏览器中打印当前窗口的内容,如果想要打印当前窗口中指定部分的内容的话需要其他的一些特殊的处理; Demo: <html> <head> & ...
- zabbix3.0.4 部署之三 （LNMP > Mysql 安装）
MySQL从5.5版本开始,通过./configure进行编译配置方式已经被取消,取而代之的是cmake工具. 因此,我们首先要在系统中源码编译安装cmake工具. 接下来的安装过程中会遇到错误,我们 ...
- org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter与org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- vuex是啥
vuex是一个状态管理工具. vuex store与一个简单的全局变量的区别是: 1.vuex stores 是响应式的,当组件改变state时,它能响应并高效地更新state. 2.state不能被 ...
- SAP NWBC for HTML and Desktop configuration steps[From sdn]
Summary :- This dcoumnenst conatin the information about requirement , hardware , configuration step ...