图片轮播,将几张图片统一放在展示平台 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 图片轮播代码编辑的更多相关文章

  1. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  2. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  3. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  5. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  6. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  7. jquery图片轮播代码

    自己写的轮播代码 来张样式效果图 先贴HTML样式 <body> <div id = "wrap"> <div id="lunbo-img& ...

  8. js 图片轮播(一)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. js最简单焦点图片轮播代码

    将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.j ...

随机推荐

  1. Linux之iptables(一、防火墙的概念)

    防火墙的概念 一.安全技术 入侵检测与管理系统(Intrusion Detection Systems):特点是不阻断任何网络访问,量化.定位来自内外网络的威胁情况,主要以提供报告和事后监督为主,提供 ...

  2. 直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章

    直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章_e-works数字化企业网 http://articles.e-works.net.cn/Component/Article ...

  3. JAVA中 redisTemplate 和 jedis的配合使用

    首先项目A,也就是SpringBOOT项目中使用redisTemplate 来做REDIS的缓存时,你会发现存到REDIS里边的KEY和VALUE,redisTemplat使用jdkSerialize ...

  4. 17.使用原生cross-fiels技术解决搜索弊端

    主要知识点: 原生cross-fiels的用法 原生cross-fiels解决三个弊端     一.原生cross-fiels的用法     GET /forum/article/_search { ...

  5. 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', ...

  6. 3 Java的基本程序设计结构

        本章主要内容: 一个简单的Java应用程序 注释 数据类型 变量 运算符 字符串 输入输出 控制流 大数值 数组       本章主要介绍程序设计的基本概念(如数据类型.分支以及循环)在Jav ...

  7. 本地数据文件加载到hive表

    1.在test数据库下创建表格 hive> create table vod_record_all( > watch_time date, > device_id string, & ...

  8. 使用Django框架实现游戏站点搭建

    完整project链接点击打开链接 上一篇中我们使用了Javascript和Html5实现了弹球游戏.而在本文中我们希望以其为基础实现游戏站点,可以实现用户的注冊登录.游戏成绩记录,排名显示.微博分享 ...

  9. 请问在C#的Winform下如何用正则表达式限制用户只能在textBox中输入18位的身份证号码。

    请问在C#的Winform下如何用正则表达式限制用户只能在textBox中输入18位的身份证号码. 2013-06-18 11:07会飞的鱼儿18 | 分类:C#/.NET | 浏览101次 不能有空 ...

  10. poj 2142

    Ms. Iyo Kiffa-Australis has a balance and only two kinds of weights to measure a dose of medicine. F ...