自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<meta name="description" content="智能社是一家专注于web前端开发技术的公司，目前主要提供JavaScript培训和HTML5培训两项服务，同时还推出了大量javascript基础知识教程，智能课堂为你带来全新的学习方法和快乐的学习体验。" />
<title>智能社— http://www.zhinengshe.com</title>
<style>
*{ margin:; padding:; list-style:none;}
#box{ width:534px; height:300px; position:relative; margin:50px auto; overflow:hidden;}
#box ul{ position:absolute; left:; top:;}
#box ul li{ float:left; width:534px; height:300px;}
#box ul li img{ height:300px;} #box a{ transition:.2s all ease;}
#box .prev,#box .next{position:absolute; top:%; z-index:; height:80px; line-height:80px; background:rgba(,,,0.6); color:#fff; width:80px; text-align:center; margin-top:-40px; display:none;}
#box .prev{ left:;}
#box .next{ right:;}
#box a:hover{ background:rgba(,,,0.4);} #box ol{ position:absolute; width:120px; left:%; margin-left:-60px; bottom:10px;}
#box ol li{ width:20px; height:20px; background:#f60; float:left; margin:2px; text-align:center; text-indent:-9999px; border-radius:%;}
#box ol li.active{ background:#fff;}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oPrev=oBox.children[];
var oNext=oBox.children[];
var oUl=oBox.getElementsByTagName('ul')[];
var aLi=oUl.children;
var oOl=oBox.getElementsByTagName('ol')[];
var aBtn=oOl.children; //先复制一份
oUl.innerHTML+=oUl.innerHTML;
//算宽度
oUl.style.width=aLi.length*aLi[].offsetWidth+'px'; var W=oUl.offsetWidth/; //移入显示俩按钮
oBox.onmouseover=function(){
clearInterval(timer);
oPrev.style.display='block';
oNext.style.display='block';
}
oBox.onmouseout=function(){
timer=setInterval(function(){
iNow--;
tab();
},);
oPrev.style.display='none';
oNext.style.display='none';
}
//覆模循环一一对应。
var iNow=; //选项卡
for(var i=; i<aBtn.length; i++){
(function(index){
aBtn[i].onclick=function(){ if(index== && iNow%aBtn.length==aBtn.length-){//循环一圈后，index=0；iNow%aBtn.length=最后一张图片的时候。iNow都处于
//++;
iNow++;
}
if(index==aBtn.length- && iNow%aBtn.length==){//循环一圈后，index=最后一个下标；iNow%aBtn.length=第一张图片的时候。iNow都处于
//--;
iNow--;
} if(iNow>){
iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;//Math.floor(iNow/aBtn.length)*aBtn.length 和newMove 对应起来，只要开始动就得走一屏幕。对应的按钮也在对应着变化。
}else{
if(index== && iNow%aBtn.length==-){
iNow++;
}
iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;
}
tab();
document.title=iNow;
}
})(i);
} function tab(){
for(var i=; i<aBtn.length; i++){
aBtn[i].className='';
}
if(iNow<){
aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active';
}else{
aBtn[iNow%aBtn.length].className='active';
}
//oUl.style.left=-iNow*aLi[0].offsetWidth+'px';
console.log(iNow)
startMove(oUl,-iNow*aLi[].offsetWidth);
} //点击
oNext.onclick=function(){
iNow++;
tab(); }
var timer=null;
timer=setInterval(function(){
iNow--;
tab();
},); oPrev.onclick=function(){
iNow--;
tab(); }
var left=;
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iSpeed=(iTarget-left)/;// 总的距离/8得到速度。
//判断speed 正负，来取舍不同的值，不能为小数，每次都要求走一个li宽度。
iSpeed=iSpeed>?Math.ceil(iSpeed):Math.floor(iSpeed); if(left==iTarget){//判断l=iTaegrt要关闭定时器
clearInterval(obj.timer);
}else{
left+=iSpeed;
if(left<){
obj.style.left=left%W+'px';
}else{
obj.style.left=(left%W-W)%W+'px';
}
} },);
}
}
</script>
</head> <body>
<div id="box">
<a href="javascript:;" class="prev">prev</a>
<a href="javascript:;" class="next">next</a>
<ul>
<li><img src="img/0.jpg"></li>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js的更多相关文章
- 轮播插件、原生js编写，弄懂这个，基本上各种轮播都可以自己写了
直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 轮播图--使用原生js的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 背景大图隔几秒切换（非轮播，淡入淡出）--变形金刚joy007 项目总结
工作日想了好久,周日回家才想出来的... 图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/h ...
- 浅谈轮播图（原生JavaScript实现）
现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...
- JQuery实现图片轮播无缝滚动
图片轮播无缝滚动实例 实现效果展示预览: 思路: 1.设置当前索引curIndex,和前一张索引prevIndex.(curIndex为下一次要显示的图片索引,prevIndex为现在看见的图片) 2 ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- [Jquery]某宝图片轮播(无缝、带左右切换按钮)
[效果] 左右移动(非渐隐) [思路] 1.结构与样式 ①最外层div盒子当容器,里面ul宽度无限大并且相对定位(到时候移动其实移的是ul的left) ②按钮的透明度可用background:rgba ...
- swipe.js实现支持手拔与自动切换的图片轮播
一.Html代码如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div cla ...
- swiper.js在隐藏/显示切换时，轮播出现bug的解决办法
swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以 ...
随机推荐
- mybitis学习的页面
http://mybatis.github.io/mybatis-3/zh/configuration.html
- 困扰我多年的Connection reset问题
第一次出现:是thrift的python client去请求server,发现偶尔出现这个问题 第二次:接入第三方的api,去请求数据时,发现一个接入方的api第一次总是报这个错,当时又没有做处理,导 ...
- NET中的规范标准注释(一) -- XML注释标签讲解
一.摘要 .Net允许开发人员在源代码中插入XML注释,这在多人协作开发的时候显得特别有用. C#解析器可以把代码文件中的这些XML标记提取出来,并作进一步的处理为外部文档. 这篇文章将展示如何使用这 ...
- java_easyui体系之DataGrid（4）[转]
一:简介 在前面DataGrid(3)的基础上添加后台的实现.本来是想只搭建前台页面的.后台不写.现在觉得还是都实现好点.从真实情况出发.后台用的ssh. 1. 新增冻结列功能. 2. 实现界面的添加 ...
- WCF初探-7：WCF服务配置工具使用
在上一篇WCF服务配置中,文章讲解了WCF的配置所需要的基本节点和属性构造,但是对于初学者的我们在编写程序的时候,往往对这些节点的位置和属性不是特别清楚,所以就导致我们的因配置文件错误而不能运行服务程 ...
- 《大象-Think In UML》读书笔记3
建模,是指通过对客观事物建立一种抽象的方法用以表征事物并过得对事物本身的理解,同时把这种理解概念化,将这些逻辑概念组织起来,构成一种对所观察的对象的内部结构和工作原理的便于理解的表达. 建模包含两个问 ...
- 如何修改WAMP中mysql默认空密码 以及修改时报错的处理方法
WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车 ...
- 北京网赛I题 hiho1391 （树状数组、区间覆盖最大值问题）
题目链接:http://hihocoder.com/problemset/problem/1391 题意:A国和B国向对方分别投射N枚和M枚导弹(发射时间,飞行时间,伤害值),同时两国各自都有防御系统 ...
- 12-2 mysql 查询
老师提纲 1. create database test2. drop database test3. create table info( code int primary key, name va ...
- Windowns的GVIM添加markdown语法支持
gvim 7.4中其实也是有对markdown的语法文件,但格式支持并不全面,如行业代码``就没有实现. 修改方案: 从github下载plasticboy的markdown语法版本,windowns ...