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. 腾讯大数据平台Oceanus: A one-stop platform for real time stream processing powered by Apache Flink

    January 25, 2019Use Cases, Apache Flink The Big Data Team at Tencent     In recent years, the increa ...

  2. 如何在查看docker container内进程信息，与宿主机上进程信息的映射关系

    docker container内运行的进程,在宿主机上,通过ps也是能够查到的,但是在不熟悉命令的时候,无法快速找到他们的关系. 这里科普一个基础命令 docker top 1. 找到容器的id d ...

  3. Redis原理

    RESP协议 支持tcp协议.基本数据类型,比如数组,字符串等,也可支持其他的通信场景. 模拟redis接收传输过来的set数据 //ServerSocket监听6379端口模拟redis publi ...

  4. Kafka简介、基本原理、执行流程与使用场景

    一.简介 Apache Kafka是分布式发布-订阅消息系统,在 kafka官网上对 kafka 的定义:一个分布式发布-订阅消息传递系统. 它最初由LinkedIn公司开发,Linkedin于201 ...

  5. 问题记录2019-03-06（todo）

    RuntimeError: maximum recursion depth exceeded while calling a Python object

  6. TensorRT&Sample&Python[fc_plugin_caffe_mnist]

    本文是基于TensorRT 5.0.2基础上,关于其内部的fc_plugin_caffe_mnist例子的分析和介绍. 本例子相较于前面例子的不同在于,其还包含cpp代码,且此时依赖项还挺多.该例子展 ...

  7. Golang 入门 : 配置代理

    由于一些客观原因的存在,我们开发 Golang 项目的过程总会碰到无法下载某些依赖包的问题.这不是一个小问题,因为你的工作会被打断,即便你使用各种神通解决了问题,很可能这时你的线程已经切换到其他的事情 ...

  8. 关于gitee代码上传下载

    1.在gitee上面创建新分支: 2.复制本地ssh秘钥(C:\Users\Administrator\.ssh) 添加到 gitee设置页面的ssh:(如果之前没有秘钥,就执行ssh-keygen ...

  9. Python之路1-变量、数据类型、循环语法

    1.python语言介绍 编程语言主要从以下几个角度进行分类,编译型和解释型,静态语言和动态语言,强类型定义语言和弱类型定义语言. 编译和解释区别 编译器是把源程序的每一条语句都编译成机器语言,并保存 ...

  10. RfcConfig 类 主要解决Tomcat 报 The valid characters are defined in RFC 7230 and RFC 3986

    tomcat 8.0以后对请求URL做了严格的过滤 就是严格按照 RFC 3986规范进行访问解析,而 RFC 3986规范定义了Url中只允许包含英文字母(a-zA-Z).数字(0-9).-_.~4 ...