兼容性较好的web html原生js轮播器
第一步：前端样式以及html代码（图片自行添加）
css代码：javascript
#container{
width: 1200px;
height: 400px;
margin:0 auto;
overflow: hidden;/*超出的图片垂直方向隐藏，水平方向也隐藏*/
position: relative;/*提供给子元素定位*/
}
#list{
width: 7200px;
height: 400px;
position: absolute;
}
#list img{
float:left;
}
#buttons{
position: absolute;/*参照父元素进行绝对定位*/
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
margin: auto;
left: 0;
right: 0;
}
#buttons span{
cursor: pointer;
display: inline-block;
border:1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
float: left;
}
#buttons .on{
background-color: #5c307d;
}
.arrow{
cursor: pointer;
line-height: 40px;
text-align: center;
font-size: 36px;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
margin:auto;
top:0;
bottom: 0;
background-color: #d8d9d8;
color: #ffffff;
text-decoration: none;
border-radius: 50%;
display: none;
}
.arrow:hover{
background-color: #b2afaf;
}
#container:hover .arrow{
display: inline-block;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
html代码:css
<div id="container">
<div id="list" style="left:0px;">
<img src="1.jpg" alt="1">
<img src="2.jpg" alt="2">
<img src="3.jpg" alt="3">
<img src="4.jpg" alt=".4">
<img src="5.jpg" alt="5">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<div style="clear: both;"></div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
第二步:给前一张，下一张添按钮添加事件：html
<script type="text/javascript">
//下一页
window.onload=function(){
var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
var prev=document.getElementById('prev');//前一张图片按钮
var next=document.getElementById('next');//下一页按钮
next.onclick=function(){
if(!(parseInt(list.style.left)<=-4800)){//向超过第5张图片不能继续向右
list.style.left=parseInt(list.style.left)-1200+"px";
}
};
prev.onclick=function(){
if((parseInt(list.style.left)<0)){//向左超过第1张图片不能继续向左
list.style.left=parseInt(list.style.left)+1200+"px";
}
};
};
</script>
第三步：封装简化点击按钮事件(js部分，其余没有改变)前端
<script type="text/javascript">
window.onload=function(){
var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
var prev=document.getElementById('prev');//前一张图片按钮
var next=document.getElementById('next');//下一页按钮
//上一页,下一页点击按钮函数
function animate(offset){
var left=list.style.left;//图片位置
var leftOffset=parseInt(left);//图片偏移量
if (offset==-1200) {
if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右
left=(leftOffset+offset)+'px';
list.style.left=left;
}
return;
}
if (offset==1200) {
if((leftOffset<0)){//向左超过第1张图片不能继续向左
left=(leftOffset+offset)+"px";
list.style.left=left;
}
}
}
next.onclick=function(){
animate(-1200);
};
prev.onclick=function(){
animate(1200);
};
};
</script>java
第四步:图片切换对应小按钮样式改变函数
<script type="text/javascript">
window.onload=function(){
var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
var prev=document.getElementById('prev');//前一张图片按钮
var next=document.getElementById('next');//下一页按钮
var index=1;//默认小按钮为1
var buttons=document.getElementById("buttons").getElementsByTagName('span');
//上一页,下一页点击按钮函数
function animate(offset){
var left=list.style.left;//图片位置
var leftOffset=parseInt(left);//图片偏移量
if (offset==-1200) {
if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右
left=(leftOffset+offset)+'px';
list.style.left=left;
}
return;
}
if (offset==1200) {
if((leftOffset<0)){//向左超过第1张图片不能继续向左
left=(leftOffset+offset)+"px";
list.style.left=left;
}
}
}
//按钮样式改变函数
function showButton(){
for (var i = 0; i <buttons.length; i++) {
if (buttons[i].className=="on") {
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";
}
next.onclick=function(){
if (index==5) {//若是小按钮已经到了第五个小按钮，下一个小按钮切换回1
index=1;
}else{//不是第五个，就继续++
index+=1;
}
animate(-1200);
showButton();
};
prev.onclick=function(){
if (index==1) {//若是小按钮已经到了第1个小按钮，上一个小按钮切换回5
index=1;
}else{//不是第1个，就继续--
index-=1;
}
animate(1200);
showButton();
};
};
</script>
第五步：图片无限左右切换优化
<script type="text/javascript">
window.onload=function(){
var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
var prev=document.getElementById('prev');//前一张图片按钮
var next=document.getElementById('next');//下一页按钮
var index=1;//默认小按钮为1
var buttons=document.getElementById("buttons").getElementsByTagName('span');
//上一页,下一页点击按钮函数
function animate(offset){
var left=list.style.left;//图片位置
var leftOffset=parseInt(left);//图片偏移量
if (offset==-1200) {
if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右
left=(leftOffset+offset)+'px';
list.style.left=left;
}
if (leftOffset==-4800) {//超过第5张得时候从新回到第一张
list.style.left=0+'px';
index=1;//更新一下按钮
}
return;
}
if (offset==1200) {
if((leftOffset<0)){//向左超过第1张图片不能继续向左
left=(leftOffset+offset)+"px";
list.style.left=left;
}
if (leftOffset==0) {//超过第1张得时候从新回到第5张
list.style.left=-3600+'px';
index=5;//更新一下按钮
}
}
}
//按钮样式改变函数
function showButton(){
for (var i = 0; i <buttons.length; i++) {
if (buttons[i].className=="on") {
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";
}
next.onclick=function(){
if (index==5) {//若是小按钮已经到了第五个小按钮，下一个小按钮切换回1
index=1;
}else{//不是第五个，就继续++
index+=1;
}
animate(-1200);
showButton();
};
prev.onclick=function(){
if (index==1) {//若是小按钮已经到了第1个小按钮，上一个小按钮切换回5
index=1;
}else{//不是第1个，就继续--
index-=1;
}
animate(1200);
showButton();
};
};
</script>
第六步:小按钮的点击事件动画
<script type="text/javascript">
window.onload=function(){
var list=document.getElementById("list");//获取相册div，便于移动相册框的图片
var prev=document.getElementById('prev');//前一张图片按钮
var next=document.getElementById('next');//下一页按钮
var index=1;//默认小按钮为1
var buttons=document.getElementById("buttons").getElementsByTagName('span');
//上一页,下一页点击按钮函数
function animate(offset,jump="num"){
var left=list.style.left;//图片位置
var leftOffset=parseInt(left);//图片偏移量
if (offset==-1200&&jump=="num") {
if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右
left=(leftOffset+offset)+'px';
list.style.left=left;
}
if (leftOffset==-4800) {//超过第5张得时候从新回到第一张
list.style.left=0+'px';
index=1;//更新一下按钮
}
return;
}
if (offset==1200&&jump=="num") {
if((leftOffset<0)){//向左超过第1张图片不能继续向左
left=(leftOffset+offset)+"px";
list.style.left=left;
}
if (leftOffset==0) {//超过第1张得时候从新回到第5张
list.style.left=-3600+'px';
index=5;//更新一下按钮
}
return;
}
if (parseInt(jump)>0) {//向右跳转
var offsetjump=-1200*jump;
left=(leftOffset+offsetjump)+'px';
list.style.left=left;
return;
}
if (parseInt(jump)<0) {//向左跳转
var offsetjump=-1200*jump;
left=(leftOffset+offsetjump)+'px';
list.style.left=left;
return;
}
}
//按钮样式改变函数
function showButton(){
for (var i = 0; i <buttons.length; i++) {
if (buttons[i].className=="on") {
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";
}
next.onclick=function(){
if (index==5) {//若是小按钮已经到了第五个小按钮，下一个小按钮切换回1
index=1;
}else{//不是第五个，就继续++
index+=1;
}
animate(-1200);
showButton();
};
prev.onclick=function(){
if (index==1) {//若是小按钮已经到了第1个小按钮，上一个小按钮切换回5
index=1;
}else{//不是第1个，就继续--
index-=1;
}
animate(1200);
showButton();
};
//为每一个小按钮绑定事件
for (var i = 0; i <buttons.length; i++) {
buttons[i].onclick=function(){
var myIndex=parseInt(this.getAttribute('index'));//当前按钮下标
if(myIndex-index>0){//向右偏移
animate(-1200,myIndex-index);
index=myIndex;//更新按钮
showButton();
}else{
animate(1200,myIndex-index);
index=myIndex;//更新按钮
showButton();
}
}
}
};
</script>
第七步：优化小按钮（点击同一个按钮不触发事件）this
if (this.className=="on") {
return;
}
在buttoms循加入
第八步:给点击事件加动画
相关文章
- 1. 轮播图：原生JS+CSS3
- 2. 完整html +css +原生js轮播图
- 3. 原生js,兼容
- 4. 原生JS的兼容性问题
- 5. 原生JS轮播图
- 6. 浏览器兼容性(js、html、css)
- 7. js___原生js轮播
- 8. 原生 js 轮播图（8）
- 9. 轮播图 JS原生
- 10. JS原生轮播图
- 更多相关文章...
- • Docker 容器连接 - Docker教程
- • Docker 容器使用 - Docker教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • Docker容器实战(六) - 容器的隔离与限制
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升级Gradle后报错Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地环境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中关键字前后几行的内容
- 5. XXE萌新进阶全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通过agent监控winserve12
- 8. IT行业UI前景、潜力如何？
- 9. Mac Swig 3.0.12 安装
- 10. Windows上FreeRDP-WebConnect是一个开源HTML5代理，它提供对使用RDP的任何Windows服务器和工作站的Web访问
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 轮播图：原生JS+CSS3
- 2. 完整html +css +原生js轮播图
- 3. 原生js,兼容
- 4. 原生JS的兼容性问题
- 5. 原生JS轮播图
- 6. 浏览器兼容性(js、html、css)
- 7. js___原生js轮播
- 8. 原生 js 轮播图（8）
- 9. 轮播图 JS原生
- 10. JS原生轮播图