javascript轮播自动播放切换滑过停止，上一页/下一页


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript焦点图</title>

    <style>

        *{margin:0;padding:0;}

        li{list-style: none;}

        #container{position:relative;width:680px;height:344px;overflow:hidden;margin:50px auto;font-size:13px;}

        #container img{width:680px;height:344px;}

        #tabs li{width:20px;height:20px;background:#000;color:#fff;float:left;margin-right:5px;text-align:center;line-height:20px;cursor: pointer;}

        #tabs{position:absolute;right: 10px;bottom:10px;}

        #tabs .active{background:#d75509;}

        #arrow{left:5px;bottom:5px;position:absolute;}

        #arrow span{width: 20px;height: 20px;display: inline-block;background: #000;color: #fff;text-align: center;cursor:pointer;}

        #content div{width: 680px;height: 344px;display:none;}

        #content .active{display:block;}

        #container ul li.active {background:yellow;}

    </style>

</head>

<body>

<div id="container">

    <ul id="tabs">

        <li data-index ="0" class="active">1</li>

        <li data-index ="1">2</li>

        <li data-index ="2">3</li>

        <li data-index ="3">4</li>

    </ul>

    <div id="content">

        <div class="active"><img src="data:images/1.jpg" alt=""></div>

        <div><img src="data:images/2.jpg" alt=""></div>

        <div><img src="data:images/3.jpg" alt=""></div>

        <div><img src="data:images/4.jpg" alt=""></div>

    </div>

    <div id="arrow">

        <span>&lt;</span>

        <span>&gt;</span>

    </div>

</div>

<script>

var  aLi = document.querySelectorAll('#tabs li');//arr,图索引

var oContainer = document.querySelector('#container');

var aDiv = document.querySelectorAll('#content div');

var aSpan = document.querySelectorAll('#arrow span');

var index=0;//上下图

var timer=null;

for(var i=0;i<aLi.length;i++){

    //循环时就存索引,js中没有属性index，自定义的

    aLi[i].index = i;

    //进入onclick前for已经循环到4

    aLi[i].onclick=function(){

        index=this.index;

        switchImg(this.index);

    }

}

//图片切换函数

function switchImg(idx){

    //去掉所有高亮

    for(var j=0;j<aLi.length;j++){

        aLi[j].className='';

        aDiv[j].className='';

    }

    //this.index =this.getAttribute('data-index')//或在html中加入自定义索引data-index属性

    aLi[idx].className='active';

    aDiv[idx].className='active';

}

//切换右测图片<

aSpan[0].onclick=function(){

    index--;

    if(index<0){

        index=aLi.length-1;

    }

    switchImg(index);

}

//>

aSpan[1].onclick=function(){

    index++;

    if(index==aLi.length){

        index=0;

    }

    switchImg(index);

}

//自动播放,调用点击>事件

timer = setInterval(function(){

    aSpan[1].onclick();

},1000)

oContainer.onmouseover = function(){

    clearInterval(timer);

    timer =null;

}

oContainer.onmouseout = function(){

    timer = setInterval(function(){

        aSpan[1].onclick();

    },1000)

}

</script>

</body>

</html>

练习:javascript轮播图效果的更多相关文章

  1. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  2. 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...

  3. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  4. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  5. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  6. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  7. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  8. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  9. Android项目实战（四十七）：轮播图效果Viewpager

    简易.常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V    需求如下: 不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最 ...

随机推荐

  1. 数据可视化的开源方案: Superset vs Redash vs Metabase (一)

    人是视觉动物,要用数据把一个故事讲活,图表是必不可少的.如果你经常看到做数据分析同事,在SQL客户端里执行完查询,把结果复制/粘贴到Excel里再做成图表,那说明你的公司缺少一个可靠的数据可视化平台. ...

  2. vue给不同环境配置不同打包命令

    第1步:安装cross-env 1 npm i --save-dev cross-env 第2步:修改各环境下的参数 在config/目录下添加test.env.js.pre.env.js. 修改pr ...

  3. day20-多并发编程基础（一）

    重新写一下吧,系统奔溃了,以前写的完全没了,悲催,今日主要写进程 1. 进程的理论知识 2. python中的进程操作 开始今日份整理,加油,你是最胖的!!! 1. 进程的理论知识 1.1 操作系统的 ...

  4. Python编码、集合set、深浅拷贝

    编码 : a.encode(' ')     windows 默认编码GBK ASCII : 最早的编码. ⾥⾯有英⽂⼤写字⺟, ⼩写字⺟, 数字, ⼀些特殊字符.没有中⽂, 8个01代码, 8个bi ...

  5. JS正则四个反斜杠的含义

    我们首先来看如下代码,在浏览器中输出的是什么? // 在浏览器中输出的 console.log('\\'); // 输出 \ console.log('\\\\'); // 输出 \\ 一:js正则直 ...

  6. Java面试准备之JVM

    介绍JVM中7个区域,然后把每个区域可能造成内存的溢出的情况说明 程序计数器:看做当前线程所执行的字节码行号指示器.是线程私有的内存,且唯一一块不报OutOfMemoryError异常. Java虚拟 ...

  7. Golang 入门系列(九) 如何读取YAML,JSON,INI等配置文件

    实际项目中,读取相关的系统配置文件是很常见的事情.今天就来说一说,Golang 是如何读取YAML,JSON,INI等配置文件的. 1. json使用 JSON 应该比较熟悉,它是一种轻量级的数据交换 ...

  8. STL中的set使用方法详细！！！！

    1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...

  9. Elastic Stack初篇-Logstash

     一.Logstash简介      Logstash是一个开源数据收集引擎,具有实时管道功能.Logstash可以动态地将来自不同数据源的数据统一起来,并将数据标准化到你所选择的目的地. 二.Log ...

  10. JAVA工程师-蚂蚁金服电话面试

    今天5点半接到一个杭州的电话,是蚂蚁金服打来的,当时心里一阵发慌,由于还在上班,就和面试官约定6点下班之后再来.挂完电话,心里忐忑的不行,感觉自己这也没准备好,那也没准备好.剩下半个小时完全没有心思再 ...