js 轮播图中点击小圆圈图片跳到指定图片

html代码(部分)

<div class="w"><div class="main"><!--焦点图模块--><div class="focus fl"><a href="javascript:;" class="arrow-l">&lt;</a><a href="javascript:;" class="arrow-r">></a><ul><li><img src="upload/focus1.jpg" alt=""></li><li><img src="upload/focus1.jpg" alt=""></li><li><img src="upload/focus1.jpg" alt=""></li><li><img src="upload/focus1.jpg" alt=""></li><li><img src="upload/focus1.jpg" alt=""></li></ul>
<!--            小圆圈--><ol class="circle"><!--//js动态生成--></ol></div></div>
</div>

   javascript代码部分

var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle')var focusWidth = focus.offsetWidth;for (var i = 0; i < ul.children.length; i++) {//创建一个livar li = document.createElement('li');//记录当前小圆圈的索引号li.setAttribute('index', i);//把li放到ol里ol.appendChild(li);//为小圆圈添加点击事件li.addEventListener('click', function () {//干掉所有人for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}//留下我自己this.className = 'current';//点击圆圈，移动图片，移动的时ul//移动的距离是圆圈的索引号乘以图片宽度（负值）var index = this.getAttribute('index');animate(ul, index * focusWidth * -1);})}//把ol里面的第一个li的类名设置为currentol.children[0].className = 'current';

css代码(部分)

.main {width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;/*background-color: pink;*/
}.focus {/*焦点图*/position: relative;width: 720px;height: 455px;
}
.focus ul {position: absolute;top: 0;left: 0;width: 900%;z-index: -1;
}
.focus ul li{float: left;
}
.arrow-l,
.arrow-r{display: none;position: absolute;top: 50%;margin-top: -20px;width: 24px;height: 40px;background: rgba(0,0,0,.3);text-align: center;line-height: 40px;color: #ffffff;font-family: icomoon;font-size: 18px;z-index: 2;
}
.arrow-r {right: 0;
}
.circle {position: absolute;bottom: 10px;left: 50px;
}
.circle li {float: left;width: 8px;height: 8px;border: 2px solid rgba(255,255,255,0.5);margin: 0 3px;border-radius: 50%;cursor: pointer;
}.current {background-color: #ffffff;
}

js 轮播图中点击小圆圈图片跳到指定图片相关推荐

js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
js轮播图(点击图片切换定时器效果)
轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换不说别的直接上代码 <!DOCTYPE html> <html> <head><titl ...
js轮播图按钮小案例
案列介绍我们在写网页和app的时候经常看到轮播图,通过小按钮或者左右箭头按钮操作切换图片,点击到当前的小按钮并改变它的样式,并实现切换图片,本案例是写一个切换按钮的小案例. 一.大概步骤注意:有很 ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
JS轮播图（点击切换、自动播放、悬停控制）
JS轮播图轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...

js 轮播图中点击小圆圈图片跳到指定图片

js 轮播图中点击小圆圈图片跳到指定图片相关推荐

最新文章

热门文章