Js原生轮播-直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
<title>Document</title>
<link rel="stylesheet" href=""/>
<style>
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif;
}
body{
background:#eee;
}
#Bigbox{
width:720px;
height:420px;
border:1px solid #333;
margin:60px auto;
}
#Box{
width:700px;
height:400px;
position:relative;
overflow: hidden;
top:10px;
left:10px;
}
#Ul{
height:400px;
position:absolute;
top:0;
left:0;
}
#Ul li{
width:700px;
height:400px;
float:left;
}
#Left{
width:60px;
height:50px;
border-radius:30%;
background:rgba(96,96,96,.5);
position:absolute;
top:50%;
left:0;
margin-top:-25px;
color:#fff;
line-height:50px;
text-align:center;
cursor:pointer;
font-size:20px;
display:none;
}
#Right{
width:60px;
height:50px;
border-radius:30%;
background:rgba(96,96,96,.5);
position:absolute;
top:50%;
right:0;
margin-top:-25px;
color:#fff;
line-height:50px;
text-align:center;
cursor:pointer;
font-size:20px;
display:none;
}
</style>
</head>
<body>
<div id="Bigbox">
<div id="Box">
<ul id="Ul">
<li>
<img src="img/1.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/2.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/3.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/4.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/5.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/6.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/7.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/8.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/9.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/10.jpg" width="100%" height="100%">
</li>
</ul>
<div id="Left" onselectstart="return false">左</div>
<div id="Right" onselectstart="return false">右</div>
</div>
</div>
<script>
window.onload = function(){
var n = 0;
var timer = null;
var timer1 = null;
var timer2 = null;
var timer3 = null;
var oDiv = document.getElementById('Box')
var oUl = document.getElementById('Ul')
var oLi = oUl.getElementsByTagName('li')
//获取div宽度
var oDivWidth = getStyle(oDiv,'width').split('px')[0] //复制oUl的innerHTML
oUl.innerHTML+= oUl.innerHTML
//设置ul宽度
oUl.style.width = oLi.length*oDivWidth+'px'
//获取ul宽度
var oUlWidth = getStyle(oUl,'width').split('px')[0] //封装获取非行间样式函数
function getStyle(obj,sName){
if(obj.currentStyle){
return obj.currentStyle[sName];
}else{
return getComputedStyle(obj,false)[sName];
}
}
//执行函数
clearInterval(timer3)
timer3 = setInterval(function(){
Run()
},2000)
//封装运动函数
function Run(){
clearInterval(timer)
timer = setInterval(function(){
n-=20;
oUl.style.left = n+'px'
if(n%oDivWidth==0){
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function(){
Run()
},2000)
}
if(n<=-oUlWidth/2){
oUl.style.left = 0;
n=0;
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function(){
Run()
},2000)
}
},30)
}
//鼠标移入停止滚动
oDiv.onmouseover = function(){
Left.style.display = 'block'
Right.style.display = 'block'
clearInterval(timer3)
clearInterval(timer2)
timer2 = setInterval(function(){
if(n%oDivWidth==0){
clearInterval(timer)
clearInterval(timer1)
}
},30)
}
//鼠标移出继续执行
oDiv.onmouseout = function(){
Left.style.display = 'none'
Right.style.display = 'none'
clearInterval(timer3)
clearInterval(timer2)
clearInterval(timer1)
timer1 = setTimeout(function(){
Run()
},2000)
}
//向左
Left.onclick = function(){
//清除所有定时器
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
timer = setInterval(function(){
n-=50;
oUl.style.left = n+'px'
if(n%oDivWidth==0){
clearInterval(timer)
}
if(n<=-oUlWidth/2){
oUl.style.left = 0;
n=0;
}
},30)
}
//向右
Right.onclick = function(){
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
if(n==0){
n=-oUlWidth/2
}
clearInterval(timer)
timer = setInterval(function(){
n+=50;
oUl.style.left = n+'px'
if(n%oDivWidth==0){
clearInterval(timer)
}
},30)
}
}
//哈哈
</script>
</body>
</html>
Js原生轮播-直接上代码的更多相关文章
- js原生轮播
js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- js原生轮播图
轮播图是新手学前端的必经之路! 直接上代码! <!DOCTYPE html><html lang="en"><head> <meta ch ...
- js 原生轮播图插件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 小白之js原生轮播图
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- js 图片轮播简单版
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
随机推荐
- zoj 3963 heap partion
https://vjudge.net/problem/ZOJ-3963 题意: 给出一个数列,可以用这个数列构造一种二叉树,这个二叉树满足数的下标 i <= j,并且 si <= sj,s ...
- Storm源码阅读之SpoutOutputCollector
不得不说storm是一个特别棒的实时计算框架.为了对后文理解的方便,先说几个storm中的术语: Topology:拓扑图或者拓扑结构.在storm中它通过消息分组的分式连接Spout和Bolt节点定 ...
- MySQL Database Command Line Client
.输入密码:****** 1.1.create datatable Name;创建数据库 1.2.source D://taotao.sql; source后面加sql文件是批量导入sql语句 .ue ...
- 【mock.js】后端不来过夜半，闲敲mock落灯花 ——南宋·赵师秀
mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正值产品上线的紧张时期,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了, 赵师秀非常生气 ...
- web端常见安全漏洞测试结果分析-- appscan
基于appscan测试结果分析: 一.XSS跨站脚本 指的是攻击者往Web页面里插入恶意html代码,通常是JavaScript编写的恶意代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被 ...
- web项目中图标的前端处理方案
工程中用到图标是常事,那这些图标我们前端一般是怎么解决的呢?这几种方案有什么优缺点呢? 第一种: SVG Sprite SVG sprite其实就是svg的集合.SVG即可缩放矢量图形 (Scalab ...
- 学习笔记TF035:实现基于LSTM语言模型
神经结构进步.GPU深度学习训练效率突破.RNN,时间序列数据有效,每个神经元通过内部组件保存输入信息. 卷积神经网络,图像分类,无法对视频每帧图像发生事情关联分析,无法利用前帧图像信息.RNN最大特 ...
- 打造颠覆你想象中的高性能，轻量级的webform框架---无刷新提交后台并返回参数（第五天）
问题5: 使用aspx 页面执行后台方法,总是要刷新整个页面?我想提交后台不刷新页面,同时返回参数 执行前台的js 脚本,就是说类似于像 ajax 的效果一样,那我们该怎么做呢? 大家是否已经看了前 ...
- oracle 错误码 ORA-00119 / ORA-00130
今天启动oracle时居然报错,错误信息如下: SQL> startup ORA-00119: invalid specification for system parameter LOCAL_ ...
- 利用JS做网页特效——大图轮播
大图轮播完整流程代码操作: <style> * { margin: 0px; padding: 0px; ...