html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果
2019-01-06
编程之家
https://www.jb51.cc
编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
首先来分析一下轮播图效果的实现原理:
1、父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden;
2、子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute;
3、一个li即一张图片的宽度为父元素的显示宽度
4、初始时,ul的left为0,这时第一张图片即第一个li显示
5、点击下一张按钮,将整个ul左移,使第二个li对齐父元素的左边框,此时ul的left为负的一个li的宽度
6、点击上一张按钮,将整个ul右移
7、对特殊情况进行处理,即第一张图时点上一张,最后一张图时点下一张
第一张图时点上一张,我们滚动到最后一张图,整个ul左移,即把left值改为负的n-1张图的宽度;
最后一张图时点下一张,我们滚到第一张图的位置,整个ul右移,即把left值改为0
用一张图来帮助理解:
修改ul元素的left值很简单ul.style.left=设定值,就可以了,但我们想有一个滑动的效果,那我们需要用setInterval来实现
最后的效果如下:
动图不能录制太大CSDN有2M的限制_(:зゝ∠)_
下面放代码
script部分
window.οnlοad= function () {
var nav=document.getElementById("nav").getElementsByTagName("li");
var img=document.getElementById("imgList");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var index=0;//当前图片序列号
var timer;//定时器名字
var iSpeed=-10;//滚动的速度
function goRoll(){
timer=setInterval(function () {
img.style.left=img.offsetLeft+iSpeed+'px';
var stop=-index*870+'px';//当达到目标位置是停止定时器
if(img.style.left==stop){
iSpeed=-10;
clearInterval(timer);
}
},10)
}
// 上一张和下一张点击效果
prev.οnclick= function () {
if(index==0){
index=2;
iSpeed=-20;
}else{
index--;
iSpeed=10;
}
goRoll();
//img.style.left=-index*870+'px';
};
next.οnclick= function () {
if(index==2){
index=0;
iSpeed=20;
}else{
index++;
iSpeed=-10;
}
goRoll();
//img.style.left=-index*870+'px';
};
}
html放一下
Box">
CSS放一下
Box{width:960px;height:100%;margin:0 auto;overflow:hidden;position:relative;}
Box{width:990px;z-index:1000;}
.center-panel .center-line{height:76px;position:absolute;width:100%;top:200px;z-index:10;}
.center-panel .panel-Box a{width:51px;height:82px;display:block;position:absolute;top:200px;}
.center-panel .prev-btn{background:url('../img/Button-left.png');left:0;}
.center-panel .next-btn{background:url('../img/Button-right.png');right:0;}
.center-panel .img-Box{width:940px;height:366px;background:url('../img/shadow.png');margin-top:45px;margin-left:10px;overflow:hidden;}
.center-panel .list-Box{width:870px;height:334px;margin:16px auto;overflow:hidden;position:relative;}
.center-panel .img-list{width:4000px;height:334px;position:absolute;left:0;}
.center-panel .img-list li{width:870px;height:100%;float:left;}
因为我写了一整个页面都放出来没啥用,所以我只截取了用到的部分。
现在还是有些问题的,比如如果点击过快是会出问题的,这个以后看看能不能完善。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
总结
以上是编程之家为你收集整理的原生JS实现图片轮播切换效果全部内容,希望文章能够帮你解决原生JS实现图片轮播切换效果所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!
html原生js实现图片轮播,原生JS实现图片轮播切换效果相关推荐
- html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管 ...
- 原生JS实现小米轮播图和网易云轮播图
文章目录 小米轮播图 网易云轮播图 小米轮播图 实现功能: 定时切换(2s) 点击按钮停止切换 点击向左向右按钮进行相应切换 鼠标点击下方的小圆点,并进行相应的切换 效果: 代码如下: <!DO ...
- 图片竖轮播html,JS实现纵向轮播图(初级版)
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下 描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度 ...
- html图片轮播怎么写,用js和CSS写图片切换效果(轮播图)
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果 对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
- JS来实现轮播图(走马灯)可左右切换图片,鼠标移入会停止轮播
效果一: 会自动进行轮播,当鼠标进入轮播图区域会停止轮播,点击左右箭头可以向前.向后进行切换图片 效果二: 这种效果比第一种效果简单,只要删除一些代码和修改一些样式即可. 实现原理 轮播图整体是放在u ...
- html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变 效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
- js轮播图(点击图片切换 定时器效果)
轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换 不说别的直接上代码 <!DOCTYPE html> <html> <head><titl ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
最新文章
- 李飞飞等提出新的迭代视觉推理框架,在ADE上实现8.4 %的绝对提升
- 【C++/C】【学习笔记】二分算法——处理“最小却最大”问题
- 什么是锚文本以及锚文本连接
- 深度学习中张量flatten处理(flatten,reshape,reduce)
- 机器学习笔记:Momentum
- idea基于spring boot的依赖分开打包
- 飞鸽传书联系企业内部管理机制
- (王道408考研操作系统)第二章进程管理-第一节3:进程控制(配合Linux讲解)
- python可以用del释放资源_Python中垃圾回收和del语句详解
- Web架构演变过程以及出现的问题
- ROS 机器人操作系统:概述
- 学习Python你必须了解的lenna小姐姐
- MATLAB符号运算
- 毫米和像素怎么换算_像素和厘米怎么换算?
- LODOP 打印插件使用
- 《数据库系统工程师》备考指南
- php eot 变量,在EOT内插入带有PHP变量的python代码
- ssl证书无效或不匹配怎么办
- Linux(CentOS)如何上外网
- 2的n次方对照表,最大256次方,2021年