这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 JS 实现匀速图片轮播动画, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
JS 实现轮播图实现结果图:
需求:
1 根据图片动态添加小圆点
2 目标移动到小圆点轮播图片
3 鼠标离开图片,定时轮播图片;鼠标在图片上时暂停
4 左右两侧可点击轮播图片
一、布局部分
html 部分
- <div class="w main clearfix">
- <!--主内容部分开始-->
- <div class="slider">
- <!--轮播图部分开始-->
- <ul class="imgs" id="slider_imgs">
- <li>
- <img src="images/slider01.jpg" id="slider1" alt="" />
- </li>
- <li>
- <img src="images/slider02.jpg" id="slider2" alt="" />
- </li>
- <li>
- <img src="images/slider03.jpg" id="slider3" alt="" />
- </li>
- <li>
- <img src="images/slider04.jpg" id="slider4" alt="" />
- </li>
- <li>
- <img src="images/slider05.jpg" id="slider5" alt="" />
- </li>
- <li>
- <img src="images/slider01.jpg" id="slider0" alt="" />
- </li>
- </ul>
- <div class="arrow" id="arrow">
- <a href="javascript:;" class="arrow_1">
- <</a>
- <a href="javascript:;" class="arrow_2">
- >
- </a>
- </div>
- </div>
- <!--轮播图部分结束-->
- </div>
CSS 部分
- .slider ul.imgs {
- height: 453px;
- width: 4380px;
- position: absolute;
- }.slider ul.imgs li {
- display: block;
- width: 730px;
- height: 453px;
- float: left;
- }.slider.circle {
- position: absolute;
- left: 50 % ;
- bottom: 8px;
- }.slider.circle li {
- cursor: pointer;
- float: left;
- width: 18px;
- height: 18px;
- margin: 4px;
- background - color: #3e3e3e;
- border - radius: 50 % ;
- text - align: center;
- color: #fff;
- }.slider.circle li.current {
- background: pink;
- color: white;
- }
JS 部分
1 这是匀速动画函数的封装
- /*
- ***obj:做动画的DOM对象
- ***target:对象最终运动到的目标位置(X轴)
- */
- function animate(obj,target) {
- //每次调用要先清定时器
- clearInterval(obj.Timer);
- //根据目标位置判断移动的方向,每到目标位置步长为20,否则为-20
- var speed = target>obj.offsetLeft?20:-20;
- obj.Timer =setInterval(function () {
- var left = obj.offsetLeft;
- obj.style.left = left+speed+"px";
- var result = target-left;
- //目标位置与当前位置在步长20以内,则到达目标位置
- if(Math.abs(result)<=20){
- //停止运动
- clearInterval(obj.Timer);
- //有20像素差距 我们直接跳转目标位置
- obj.style.left=target+ "px";
- }
- },2函数:
- `这里写代码片0);
- }
轮播图封装函数:
- function slider() {
- //焦点图信息DOM节点
- var imgs = document.getElementById("slider_imgs");
- var slides = imgs.parentNode;
- var lis = imgs.getElementsByTagName("li");
- var arrows = document.getElementById("arrow");
- var arrowLink = arrows.children;
- //创建小圆点
- var circle = document.createElement("ol");
- circle.setAttribute("class", "circle");
- imgs.parentNode.appendChild(circle);
- for (var i = 0,
- len = lis.length - 1; i < len; i++) {
- var li = document.createElement("li");
- li.innerHTML = i + 1;
- circle.appendChild(li);
- }
- //marginLeft=-imgli(length)*olLi(width)/2
- circle.style.marginLeft = ( - 13 * len) + "px";
- var olLis = circle.children;
- olLis[0].className = "current";
- //为小圆点添加鼠标事件
- for (var i = 0; i < olLis.length; i++) {
- //当前小圆点索引
- olLis[i].index = i;
- olLis[i].onmouseover = function() {
- for (var j = 0; j < olLis.length; j++) {
- olLis[j].className = "";
- }
- this.className = "current";
- //图片切换 imgs的CSS部分加上定位
- animate(imgs, this.index * ( - lis[0].offsetWidth));
- //当鼠标挪到定时器,当前播放图片与原点位置回原
- k = z = p = q = this.index;
- };
- }
- //鼠标移动到轮播图,不定时播放
- slides.onmouseover = function() {
- //清除自动轮播定时器
- clearInterval(Time);
- };
- //鼠标移开,自动轮播
- slides.onmouseout = function() {
- Time = setInterval(autoPlay, 1000);
- };
- //定时器部分
- var Time = null,
- k = 0,
- z = 0;
- Time = setInterval(autoPlay, 1000);
- //自动轮播图片,定时器Time
- function autoPlay() {
- k++;
- if (k > lis.length - 1) {
- imgs.style.left = 0;
- k = 1;
- }
- animate(imgs, k * ( - lis[0].offsetWidth));
- z++;
- if (z > olLis.length - 1) {
- z = 0;
- }
- for (var j = 0; j < olLis.length; j++) {
- olLis[j].className = "";
- }
- olLis[z].className = "current";
- }
- var q = 0;
- var p = 0;
- arrowLink[1].onclick = function() {
- q++;
- if (q > lis.length - 1) {
- imgs.style.left = 0;
- q = 1;
- }
- p++;
- if (p > olLis.length - 1) {
- p = 0;
- }
- for (var j = 0; j < olLis.length; j++) {
- olLis[j].className = "";
- }
- olLis[p].className = "current";
- animate(imgs, q * ( - lis[0].offsetWidth));
- }
- }
来源: http://www.phperz.com/article/17/0706/331091.html