海南网上申请营业执照步骤,seo石家庄,网页设计师有前途吗,嘉定网站建站前端#xff1a;HTMLCSSJavaScript实现轮播图2 1. 和之前版本的区别2. 实现原理3. 针对上述的改进3. 参考代码 1. 和之前版本的区别
之前发布的那篇关于轮播图的文章在这#xff1a;前端#xff1a;HTMLCSSJavaScript实现轮播图#xff0c;只能说存在问题吧#xff01;比… 前端HTMLCSSJavaScript实现轮播图2 1. 和之前版本的区别2. 实现原理3. 针对上述的改进3. 参考代码 1. 和之前版本的区别
之前发布的那篇关于轮播图的文章在这前端HTMLCSSJavaScript实现轮播图只能说存在问题吧比如2、3实现效果是用了两个定时器实现的虽然也达到了那种效果但是从一些方面来说总有点繁琐吧比如在一定时间内图片移动像素的计算等。现在这个不需要计算直接用一个定时器即可实现我想说现在这个版本和各位在浏览器上看到那种效果实现原理应该差不多。 虽然没有给出相应的点击事件哈
2. 实现原理
利用相对定位relative、绝对定位absolute、定时器、transition 结合relative、absolute来进行图片布局用定时器来实现图片轮播间隔效果用transition来实现每张图片移动过渡效果。 初始实现效果如上这不符合我们想要的那种效果这种是通过定时器每隔几秒变化每张图片的left的值的效果。这并不怎么美观因为图片过渡效果并不符合我们的要求但是如果显示的有多张图片那么倒还不错如下
3. 针对上述的改进 就是把所有图片从左到右进行排列外层用一个标签元素包裹每隔一段时间变换外层的标签元素的left属性值。
3. 参考代码
这个是需要改进的代码哈 main.html
!DOCTYPE html
html
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgetitle/titlelink relstylesheet href./main.css
/head
bodydiv classmain/div
/body
script typetext/javascript srcmain.js/script
/htmlmain.css
*{padding: 0;margin: 0;
}ul{list-style: none;
}.main{width: 500px;height: 300px;margin: 0 auto;position: relative;
}.dot{height: 10px;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);
}.dot span{height: 100%;float: left;width: 10px;border-radius: 50%;margin-left: 10px;cursor: pointer;
}.dot span:first-child{margin-left: 0;
}.red{background-color: red;
}.white{background-color: white;
}.main ul{position: relative;height: 100%;width: 100%;overflow-x: hidden;
}.main ul li{position: absolute;top: 0;transition: all 0.3s;width: 100%;height: 100%;
}.main ul li img{width: 100%;
}main.js
// 输入图片链接数组
const img_arr [https://i0.hdslb.com/bfs/banner/627984a9617a35c7e4366e0c74baf29ef3aa96ae.png976w_550h_1c_!web-home-carousel-cover.avif,https://i0.hdslb.com/bfs/banner/3464f3b055107b2b54b9443e02c43448c0915866.png976w_550h_1c_!web-home-carousel-cover.avif,https://i0.hdslb.com/bfs/banner/ff7d11c786ddd45c218696c3c6b19c69a71883d7.jpg976w_550h_1c_!web-home-carousel-cover.avif,https://i0.hdslb.com/bfs/sycp/creative_img/202311/74214ce12c94ba104322e2be463ec6f7.jpg976w_550h_1c_!web-home-carousel-cover.avif
];const mainEle document.querySelector(.main);
var _htmlStr ;
img_arr.forEach(function(ele){_htmlStr liimg src${ele}/li
})var _htmlStr2 ;
for(let i0;iimg_arr.length;i){_htmlStr2 span/span
}var _htmlStr2 div classdot${_htmlStr2}/div;
_htmlStr ul${_htmlStr}/ul${_htmlStr2};mainEle.innerHTML _htmlStr;const img_width 500;const elements document.querySelectorAll(.main ul li);
const elements2 document.querySelectorAll(.dot span);
elements.forEach(function(ele,index){ele.style.left index * img_width px;
})elements2.forEach(function(ele,index){if(index 0){ele.className red;}else{ele.className white;}
})function left(){elements.forEach(function(ele,index){let left_v parseFloat(ele.style.left);if(left_v - img_width 0){ele.style.left (elements.length - 1) * img_width px;}else{ele.style.left left_v - img_width px;}if(left_v - img_width 0){elements2[index].className red;}else{elements2[index].className white;}})
}var timer setInterval(left,2000);
这个是改进版本 main.html
!DOCTYPE html
html
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgetitle/titlelink relstylesheet href./main.css
/head
bodydiv classmaindiv classpre_ul idmainulliimg srchttps://i1.hdslb.com/bfs/archive/da52b26129a84aa316383d53e596d3f89c708294.jpg672w_378h_1c_!web-home-common-cover.avif alt/liliimg srchttps://i0.hdslb.com/bfs/archive/6df10d7e0834f8511ea620dbfe6bfc7b1eabdab2.jpg672w_378h_1c_!web-home-common-cover.avif alt/liliimg srchttps://i0.hdslb.com/bfs/archive/47338bc6056b6bbc906155590c6e201ae5dffee8.jpg672w_378h_1c_!web-home-common-cover.avif alt/li/ul/divdiv classdot idmainspan classred/spanspan classwhite/spanspan classwhite/span/div/div
/body
script typetext/javascript srcmain.js/script
/htmlmain.css
*{margin: 0;padding: 0;
}ul{list-style: none;
}.main{width: 500px;height: 300px;position: relative;margin: 0 auto;overflow-x: hidden;
}.main .dot{position: absolute;bottom: 8%;left: 50%;transform: translateX(-50%);height: 12px;z-index: 2;
}.dot span{float: left;height: 100%;width: 12px;border-radius: 50%;cursor: pointer;margin-left: 8px;
}.dot span:first-child{margin-left: 0;
}.white{background-color: white;
}.red{background-color: red;
}.main .pre_ul{height: 100%;position: absolute;top: 0;left: 0;transition: all 0.5s;z-index: 1;
}.main .pre_ul ul{width: 100%;height: 100%;position: relative;overflow-x: hidden;
}.main .pre_ul ul li{height: 100%;position: absolute;top: 0;left: 0;
}.main .pre_ul ul li img{width: 100%;
}
main.js
const img_width 500;
// 图片最大宽度
const eles document.querySelectorAll(.pre_ul ul li);
const pre_ul_ele document.querySelector(.pre_ul);
const dots document.querySelectorAll(.dot span);
const n eles.length;
pre_ul_ele.style.left 0;
pre_ul_ele.style.width n * img_width px;
eles.forEach(function(ele,index){ele.style.width img_width px;ele.style.left index * img_width px;
})function clear_red(){dots.forEach(function(ele,index){ele.className white;})
}var start_index 0;function left(){pre_ul_ele.style.transition all 0.5s;let left_v parseInt(pre_ul_ele.style.left);pre_ul_ele.style.left left_v - 500 px;clear_red();start_index (start_index1)%n;dots[start_index].className red;if(left_v - 500 -n*img_width){pre_ul_ele.style.left 0;}
}var timer1 setInterval(left,2000);
注上述代码没有给出点击按钮变化图片特效想实现的读者可以去看看上述第一个关于实现轮播图的版本哈
