js 图片轮播代码编辑
图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放。
<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");
}
}
// 自动轮播 将点击事件放在新事件中,然后设定间隔执行。window.setInterval()
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 ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- js 图片轮播简单版
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- jquery图片轮播代码
自己写的轮播代码 来张样式效果图 先贴HTML样式 <body> <div id = "wrap"> <div id="lunbo-img& ...
- js 图片轮播(一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js最简单焦点图片轮播代码
将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.j ...
随机推荐
- Linux之iptables(一、防火墙的概念)
防火墙的概念 一.安全技术 入侵检测与管理系统(Intrusion Detection Systems):特点是不阻断任何网络访问,量化.定位来自内外网络的威胁情况,主要以提供报告和事后监督为主,提供 ...
- 直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章
直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章_e-works数字化企业网 http://articles.e-works.net.cn/Component/Article ...
- JAVA中 redisTemplate 和 jedis的配合使用
首先项目A,也就是SpringBOOT项目中使用redisTemplate 来做REDIS的缓存时,你会发现存到REDIS里边的KEY和VALUE,redisTemplat使用jdkSerialize ...
- 17.使用原生cross-fiels技术解决搜索弊端
主要知识点: 原生cross-fiels的用法 原生cross-fiels解决三个弊端 一.原生cross-fiels的用法 GET /forum/article/_search { ...
- copy and rename a file multiple times using Matlab
for file.txt***********n=10;fileinfo=importdata('file.txt');for i=1:nfilename=sprintf('file_%d.txt', ...
- 3 Java的基本程序设计结构
本章主要内容: 一个简单的Java应用程序 注释 数据类型 变量 运算符 字符串 输入输出 控制流 大数值 数组 本章主要介绍程序设计的基本概念(如数据类型.分支以及循环)在Jav ...
- 本地数据文件加载到hive表
1.在test数据库下创建表格 hive> create table vod_record_all( > watch_time date, > device_id string, & ...
- 使用Django框架实现游戏站点搭建
完整project链接点击打开链接 上一篇中我们使用了Javascript和Html5实现了弹球游戏.而在本文中我们希望以其为基础实现游戏站点,可以实现用户的注冊登录.游戏成绩记录,排名显示.微博分享 ...
- 请问在C#的Winform下如何用正则表达式限制用户只能在textBox中输入18位的身份证号码。
请问在C#的Winform下如何用正则表达式限制用户只能在textBox中输入18位的身份证号码. 2013-06-18 11:07会飞的鱼儿18 | 分类:C#/.NET | 浏览101次 不能有空 ...
- poj 2142
Ms. Iyo Kiffa-Australis has a balance and only two kinds of weights to measure a dose of medicine. F ...