JS轮播图实现简单代码
更新时间：2021年02月19日 10:17:51 作者：My-Lady
这篇文章主要为大家详细介绍了JS轮播图实现简单代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js轮播图实现代码，供大家参考，具体内容如下
思路：
1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片
2、Container内有个放图片的list进行position的定位 ，其中的图片采用float的方式，同时当图片进行轮播时，改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器，通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时，清除定时器，图片停止轮播，当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应，同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
.container{
margin:0 auto;
width:600px;
height:400px;
position: relative;
overflow: hidden;
border:4px solid gray;
box-shadow: 3px 3px 5px gray;
border-radius:10px;
}
.list{
width:4200px;
height:400px;
position: absolute;
top:0px;
}
img{
float:left;
width:600px;
height:400px;
}
.dots{
position: absolute;
left:40%;
bottom:30px;
list-style: none;
}
.dots li{
float:left;
width:8px;
height:8px;
border-radius: 50%;
background: gray;
margin-left:5px
}
.dots .active{
background: white;
}
.pre,.next{
position: absolute;
top:40%;
font-size:40px;
color:white;
text-align:center;
background: rgba(128,128,128,0.5);
/* display:none;*/
}
.pre{
left:30px;
}
.next{
right:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="list" style=" left:-600px;">
<img src="img/5.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/1.jpg">
</div>
<ul class="dots">
<li index=1 class="active dot"></li>
<li index=2 class="dot"></li>
<li index=3 class="dot"></li>
<li index=4 class="dot"></li>
<li index=5 class="dot"></li>
</ul>
<div class="pre"><</div>
<div class="next">></div>
</div>
<script type="text/javascript">
var index=1,timer;
function init(){
eventBind();
autoPlay();
}
init();
function autoPlay(){
timer =setInterval(function () {
animation(-600);
dotIndex(true);
},1000)
}
function stopAutoPlay() {
clearInterval(timer);
}
function dotIndex(add){
if(add){
index++;
}
else{
index--;
}
if(index>5){
index = 1;
}
if(index<1){
index = 5;
}
dotActive();
}
function dotActive() {
var dots = document.getElementsByClassName("dot");
var len = dots.length;
for(var i=0 ;i<len ;i++){
dots[i].className = "dot";
}
for(var i=0;i<len;i++){
/*此处可以不用parseInt，当不用全等时*/
if(index === parseInt(dots[i].getAttribute("index"))){
dots[i].className = "dot active";
}
}
}
function eventBind(){
/*点的点击事件*/
var dots = document.getElementsByClassName("dot");
var len = dots.length;
for(var i=0;i<len;i++){
(function(j){
dots[j].onclick = function(e){
var ind = parseInt(dots[j].getAttribute("index"));
animation((index - ind)*(-600));/*显示点击的图片*/
index = ind;
dotActive();
}
})(i)
}
/*容器的hover事件*/
var con = document.getElementsByClassName("container")[0];
/*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
con.onmouseover = function (e) {
stopAutoPlay();
}
con.onmouseout =function(e){
autoPlay();
}
/*箭头事件的绑定*/
var pre = document.getElementsByClassName("pre")[0];
var next = document.getElementsByClassName("next")[0];
pre.onclick = function (e) {
dotIndex(false);
animation(600);
}
next.onclick = function (e) {
dotIndex(true);
animation(-600);
}
}
function animation(offset){
var lists = document.getElementsByClassName("list")[0];
var left = parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
if(left<-3000){
lists.style.left = "-600px";
}
else if(left>-600){
lists.style.left = "-3000px";
}
else{
lists.style.left = left+"px";
}
}
</script>
</body>
</html>
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS判断字符串字节数并截取长度的方法,涉及JavaScript针对页面元素与字符串的动态操作技巧,需要的朋友可以参考下2016-03-03
今天小编就为大家分享一篇layui表格数据复选框回显设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了JavaScript实现图片手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了JavaScript实现数字数组正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS更简单的获取表单中数据(formdata),本文给大家分享的js获取表单数据更简洁，通过两种方法结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JS获取一个未知DIV高度的方法,涉及javascript针对页面元素属性的动态操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-08-08
分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路，考虑到该功能有一定的适用性，于是把相关的逻辑封装成了一个ImageUploadView组件，实际使用效果可查看下一段的git效果图2016-04-04
Javascript base64编码实现代码，需要的朋友可以参考下。2011-12-12
这篇文章给大家分享了通过函数作用域和块级作用域看javascript的作用域链的相关知识点内容，有兴趣的朋友参考学习下。2018-08-08
当我们请求好第一页数据后,将请求下一页放到异步任务队列里（宏任务或者微任务）,等当前同步任务执行完成后,立马请求下一页数据,本文给大家介绍了JavaScript如何利用事件循环实现数据预加载,需要的朋友可以参考下2024-05-05
最新评论