js图片切换（点击左右按钮，小圆点切换图片，自动轮播）

点击左右按钮，小圆点切换图片

 <div><button>&lt;</button><button class="right">&gt;</button><h2 id="cont">1/4</h2><img src="./img/1.jpg" alt="" id="pic"><ul><li class="item"></li><li></li><li></li><li></li></ul><h2 id="foot">one</h2></div>

小圆点的特殊样式

 .item{background: lightgreen;}

js部分
获取元素
使用数组添加图片及图片信息

  var cont = document.getElementById('cont');var foot = document.getElementById('foot');var pic = document.getElementById('pic');var oli = document.getElementsByTagName('li');var btn = document.getElementsByTagName('button');var arr = [{picSrc:'./img/1.jpg',picCont : '1/4',picFoot:'one'},{picSrc:'./img/2.jpg',picCont : '2/4',picFoot:'two'},{picSrc:'./img/3.jpg',picCont : '3/4',picFoot:'three'},{picSrc:'./img/4.jpg',picCont : '4/4',picFoot:'four'}];var count = 0; //记录点击次数

左边按钮

 //左边按钮btn[0].onclick = function () {count--;if(count<0){// 图片到达第一张，使图片继续往后，即到达最后一张count = arr.length-1;}for (var j =0; j<oli.length ; j++){//遍历小圆点oli[j].className = '';    //初始化小圆点样式}//将点击的次数作为小圆点的下标，改变小圆点的特殊样式oli[count].className = 'item'; pic.src = arr[count].picSrc;cont.innerHTML = arr[count].picCont;foot.innerHTML = arr[count].picFoot;}

右边按钮

 //右边按钮btn[1].onclick = function () {count++;if(count>arr.length-1){  //如果点击的次数大于已有的图片数（到达最后一张图片），将count重新归0，即回到第一张count = 0;}for (var j =0; j<oli.length ; j++){  //遍历小圆点oli[j].className = '';   //初始化小圆点样式}oli[count].className = 'item';pic.src = arr[count].picSrc;cont.innerHTML = arr[count].picCont;foot.innerHTML = arr[count].picFoot;}

点击小圆点

 //点击小圆点for (var i = 0 ;i<oli.length; i++){oli[i].index = i;oli[i].onclick = function () {//关键count = this.index;for (var j =0; j<oli.length ; j++){//遍历小圆点oli[j].className = '';    //初始化小圆点样式}//将点击的次数作为小圆点的下标，改变小圆点的特殊样式oli[count].className = 'item';  pic.src = arr[count].picSrc;cont.innerHTML = arr[count].picCont;foot.innerHTML = arr[count].picFoot;}}

自动轮播

    setInterval(function () {console.log(oli.length);count++;if (count > oli.length-1 ) {count = 0;}change();}, 1000)

效果

由于代码重复很多，可以使用函数封装

 //封装函数}function change(){for (var j =0; j<oli.length ; j++){oli[j].className = '';  }oli[count].className = 'item'; pic.src = arr[count].picSrc;cont.innerHTML = arr[count].picCont;foot.innerHTML = arr[count].picFoot;}

使用时调用即可

js图片切换（点击左右按钮，小圆点切换图片，自动轮播）相关推荐

html点击圆点箭头分页,点击自动轮播图片下面的小圆点实现图片切换功能，并不是左右箭头那种切换...
我这个轮播图片没有左右箭头,只有下面的小圆点随着图片一起轮播,怎么实现onclick点击小圆点切换图片的功能这是我的js代码 var nextPcc = 1; function turnDispla ...
JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）
一.轮播图要实现的效果: 实现点击小圆点.图片滑动.小圆点样式改变二.轮播图实现效果步骤: 1.利用html+css完成轮播图片,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切 ...
android ViewPager 实现点击小圆点切换页面案例
android ViewPager 实现点击小圆点切换页面说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...
android小圆点滑动切换,android ViewPager 实现点击小圆点切换页面案例
android ViewPager 实现点击小圆点切换页面说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...
js轮播图片小圆点变化_JavaScript banner轮播左右切换圆点点击切换
JavaScript banner轮播左右切换圆点点击切换 #banner { overflow:hidden; width:100%; height:400px; position:relati ...
JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)
HTML代码 <div class="box"><ul class="box_ul"& ...
JS === 实现通过点击td 跳转相应的图片
JS ========== 通过点击每个td 实现跳转图片样式: .focus{background:#0f0} 结构: <td class = "focus">& ...
Android:ViewPager详解（异步网络加载图片，带图片缓存，并带导航小圆点）
android 应用中,如欢迎指引页面, 和图片轮播功能, 或者更多的内容在一页显示不了,要分成多个页面,这时候viewpager是很好用的. 首先看下效果: 下面是一个例子,带异步网络加载图片,并带 ...
js 定时网页点击_JS的小乐趣：轻松完成打地鼠游戏
学习目的:用基础知识做一个好玩的游戏 JS项目的小乐趣视频--轻松写一个打地鼠游戏课程大纲: 所需知识点讲解界面搭建显示和消失地鼠得分与扣分课程总结 1.所需知识:html部分 body:放 ...

js图片切换（点击左右按钮，小圆点切换图片，自动轮播）

js图片切换（点击左右按钮，小圆点切换图片，自动轮播）相关推荐

最新文章

热门文章