JS: 图片轮播模板——左右移动,点击编码移动,自动轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
#stage {
width: 500px;
height: 300px;
border: 3px solid black;
margin: 100px;
overflow: hidden;
position: relative;
}
#banner {
width: 3000px;
height: 300px;
background-color: rosybrown;
}
.items {
width: 500px;
height: 300px;
color: white;
font-size: 150px;
text-align: center;
line-height: 300px;
float: left;
}
.btn-l,
.btn-r {
width: 50px;
height: 300px;
background-color: black;
opacity: 0.5;
color: white;
font-size: 40px;
line-height: 300px;
text-align: center;
position: absolute;
top: 0px;
}
.btn-l {
left: 0px;
}
.btn-r {
right: 0px;
}
.btn-l:hover,
.btn-r:hover {
cursor: pointer;
opacity: 0.2;
}
.points {
position: absolute;
bottom: 10px;
left: 200px;
/*background-color: orangered;*/
width: 125px;
height: 20px;
}
.dot {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: gainsboro;
float: left;
margin-right: 5px;
cursor: pointer;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="stage">
<div class="btn-l">
<</div>
<div class="btn-r">></div>
<div id="banner">
<div class="items" style="">1</div>
<div class="items" style="">2</div>
<div class="items" style="">3</div>
<div class="items" style="">4</div>
<div class="items" style="">5</div>
<div class="items" style="">1</div>
</div>
<div class="points">
<div data="1" class="dot active"></div>
<div data="2" class="dot"></div>
<div data="3" class="dot"></div>
<div data="4" class="dot"></div>
<div data="5" class="dot"></div>
</div>
</div>
</body>
</html>
<script>
// 取对象
var btn_l = document.getElementsByClassName('btn-l')[0];
var btn_r = document.getElementsByClassName("btn-r")[0];
var banner = document.getElementById("banner");
var dots = document.getElementsByClassName('dot');
// 定义变量
var count = 1;
var arr = [];
// 右侧按钮点击事件
btn_r.onclick = function() {
if(count < 6) {
count++;
arr.push(window.setInterval("move_left()", 20));
} else if(count == 6) {
count = 1;
banner.style.marginLeft = 0 + 'px';
count++;
arr.push(window.setInterval("move_left()", 20));
}
for(var i = 0; i < dots.length; i++) {
dots[i].setAttribute("class", "dot");
}
dots[count - 1].setAttribute("class", "dot active");
}
// 左侧按钮点击事件
btn_l.onclick = function() {
if(count > 1) {
count--;
arr.push(window.setInterval("move_right()", 20));
}else if(count == 1){
count = 6;
banner.style.marginLeft = -2500 + 'px';
count--;
arr.push(window.setInterval("move_right()", 20));
}
for(var i = 0; i < dots.length; i++) {
dots[i].setAttribute("class", "dot");
}
dots[count - 1].setAttribute("class", "dot active");
}
// 向左移动
function move_left() {
if(banner.offsetLeft == (count - 1) * (-500)) {
clear();
} else {
banner.style.marginLeft = banner.offsetLeft - 20 + "px";
}
}
// 向右移动
function move_right() {
if(banner.offsetLeft == (count - 1) * (-500)) {
clear();
} else {
banner.style.marginLeft = banner.offsetLeft + 20 + "px";
}
}
// 清除所有间隔执行
function clear() {
for(var x in arr) {
window.clearInterval(arr[x]);
}
}
// 批量添加点击事件
for(var j = 0; j < dots.length; j++) {
dots[j].onclick = function() {
count_s = this.getAttribute("data");
if(count > count_s) {
count = count_s;
arr.push(window.setInterval("move_right()", 20));
} else if(count < count_s) {
count = count_s;
arr.push(window.setInterval("move_left()", 20));
}
for(var i = 0; i < dots.length; i++) {
dots[i].setAttribute("class", "dot");
}
this.setAttribute("class", "dot active");
}
}
// 自动轮播
function auto_move(){
if(count < 6) {
count++;
arr.push(window.setInterval("move_left()", 20));
} else if(count == 6) {
count = 1;
banner.style.marginLeft = 0 + 'px';
count++;
arr.push(window.setInterval("move_left()", 20));
}
for(var i = 0; i < dots.length; i++) {
dots[i].setAttribute("class", "dot");
}
dots[count - 1].setAttribute("class", "dot active");
}
window.setInterval("auto_move()",3000);
</script>
JS: 图片轮播模板——左右移动,点击编码移动,自动轮播的更多相关文章
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- js 图片轮播简单版
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
- js 图片轮播(一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js 图片轮播代码编辑
图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...
- angular js 图片轮播
搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...
- js图片轮播图
/*焦点图*/ var Box='.carousel';//盒子 var Menu=$(Box+' .l_cursor li');//圆点菜单 var Con ...
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 非常简洁的js图片轮播
<div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...
随机推荐
- c++刷算法的好处
写再最前面:摘录于柳神的笔记 在已经学习过C语⾔的前提下,学习C++并使⽤它刷算法的学习成本⾮常低-只需要⼏个⼩时就可 以学会- C++向下兼容C,C语⾔⾥⾯的语法完全可以在C++⽂件中运⾏,所以学习 ...
- 二、linux基础-路径和目录_用户管理_组_权限
2.1路径和目录1.相对路径:参照当前目录进行查找. 如:[root@localhost ~]# cd ../opt/hosts/备注:相对路径是从你的当前目录开始为基点,去寻找另外一个目录(或者 ...
- Linux centos7 rsync工具介绍、rsync常用选项、rsync通过ssh同步
一.rsync工具介绍 rsync是类unix系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.rsync是Linux系统下的文件同步和数据传输工具,它采用“rsync ...
- Jmeter JDBC配置
前提条件,驱动包mysql-connector-java-5.1.38-bin.jar要放到本机Java路径:C:\Program Files\Java\jdk1.8.0_73\jre\lib\ext ...
- 微信红包系统设计 & 优化
微信红包系统设计 & 优化 浏览次数:151次 腾讯大讲堂 2015年04月02日 字号: 大 中 小 分享到:QQ空间新浪微博腾讯微博人人网豆瓣网开心网更多0 编者按:经过2014年一年 ...
- 「题解」JOIOI 王国
「题解」JOIOI 王国 题目描述 考场思考 正解 题目描述 点这里 考场思考 因为时间不太够了,直接一上来就着手暴力.但是本人太菜,居然暴力爆 000 ,然后当场自闭- 一气之下,发现对 60pts ...
- scrapy 开发流程
一.Spider 开发流程 实现一个 Spider 子的过程就像是完成一系列的填空题,Scrapy 框架提出以下问题让用户在Spider 子类中作答: 1.爬虫从哪个或者那些页面开始爬取? 2.对于一 ...
- PyCharm破解安装方法
1.在3322下载站下好压缩包之后,直接点击安装文件“pycharm-professional-2018.1.exe”进行安装,默认点击“next”下一步进行操作2.选择文件所创建的位置.位置可以选择 ...
- CyclicBarrier 解读
简介 字面上的意思: 可循环利用的屏障. 作用: 让所有线程都等待完成后再继续下一步行动. 举例模拟: 吃饭人没到齐不准动筷. 使用Demo package com.ronnie; import ja ...
- Hadoop端口与界面
NameNode:7180 Cloudera Manager集群管理界面: NameNode:50070 NameNode Web UI/数据管理界面: NameNode:8020/9000 Ha ...