简单轮播图

最新推荐文章于 2024-05-17 03:12:00 发布

邻居三苏

最新推荐文章于 2024-05-17 03:12:00 发布

阅读量1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_55132979/article/details/116301359

版权

（一）实现的效果

1.点击左右按钮切换图片

（二）基本布局

1.图片横向排列，借助overflow：hidden；让显示区域以外的内容不显示就行了

（三）动画效果

1.通过JS实现动画效果，调用animation()函数

（四）实现无缝切换效果

1.当轮播图翻页时，是完整的一张图均匀翻过去，将第一张图片复制添加到末尾起到过度作用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<div class="showBox">
        <div class="imgBox" id="imgBox" style="left: -500px;">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/5.jpg" alt="">
                    </a>
                </li> 
                <li>
                    <a href="#">
                        <img src="images/1.jpg" alt="">
                    </a>
                </li> 
                <li>
                    <a href="#">
                        <img src="images/2.jpg" alt="">
                    </a>
                </li> 
                <li>
                    <a href="#">
                        <img src="images/3.jpg" alt="">
                    </a>
                </li> 
                <li>
                    <a href="#">
                        <img src="images/4.jpg" alt="">
                    </a>
                </li> 
                <li>
                    <a href="#">
                        <img src="images/5.jpg" alt="">
                    </a>
                </li> 
                <li>
                    <a href="#">
                        <img src="images/1.jpg" alt="">
                    </a>
                </li> 
            </ul>
        </div>
        <div class="circleBtn" id="circleBtn">
            <ul>
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!--javascript:;占位符，让a标签不具备任何点击功能-->
        <a href="javascript:;" id="forward">&lt;</a>
        <a href="javascript:;" id="next">&gt;</a>
	</div>
	<script src="js.js"></script>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{
    margin:0px;
    padding:0px;
}
li{
    list-style:none;
}
a{
    text-decoration:none;
}
.showBox{
    width:500px;
    height: 300px;
    background: #ccc;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}
.imgBox img{
    width:500px;
    height: 300px;
}
.imgBox ul li{
    float: left;
}
.imgBox{
    width: 3500px;
    height: 300px;
    position: absolute;
}
.circleBtn ul li{
    width: 20px;
    height: 20px;
    background:#FFFFFF;
    float: left;
    margin-right: 5px;
    border-radius: 10px;
}
.circleBtn{
    position: absolute;
    width: 125px;
    height: 20px;
    right: 10px;
    bottom: 20px;
}
.circleBtn ul li.on{
    background: #8CC6E7;
}
.showBox>a{
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 28px;
    text-align: center;
    line-height: 30px;
    display: none;
}
.showBox>a:nth-of-type(1){
    top:45%;
    left:5px;
}
.showBox>a:nth-of-type(2){
    top:45%;
    right:5px;
}
.showBox:hover a{
    display:block;
}

以下是主要的js代码简写

首先定义一个全局变量，记录当前位置

var index=1；

页面加载事件
window.onload = function(){
向右按钮点击事件
var oNextBtn = document.getElementById("next");
获取元素，局部变量
var oImgBox = document.getElementById("imgBox");
   绑定点击事件
   oNextBtn.onclick = function(){
       if(index==5){
           index=1;
       }else{
           index++;
       }
       animation1(-500);
       setCircle();
   };
向左按钮点击事件----获取元素
var oForwardBtn = document.getElementById("forward");
   绑定点击事件
   oForwardBtn.onclick = function(){
       if(index==1){
           index=5
       }else{
           index--;
       }
       animation2(500)
       setCircle();
   };

};

无动画效果的图片切换
function animation1(offset){
   获取元素
   var oImgBox = document.getElementById("imgBox");
   oImgBox.style.left = parseInt(oImgBox.style.left)+offset+"px";
   判断是否到了第一张图片的位置
   if(parseInt(oImgBox.style.left)<-2500){
       oImgBox.style.left = -500+"px";
   }
   判断是否到了第五张图片的位置
   if(parseInt(oImgBox.style.left)>-500){
       oImgBox.style.left = -2500+"px";
   }

}
设置圆形按钮高亮效果的切换
function setCircle(){
   获取元素
   var aCircleBtn = document.getElementById("circleBtn").getElementsByTagName("li");
   遍历所有的圆形按钮
   for(var i=0;i<aCircleBtn.length;i++){
       if(aCircleBtn[i].className=="on"){
   aCircleBtn[i].className="";
           break;//跳出循环
       }
   }
   根据图片的位置，设置对应的按钮高亮
   aCircleBtn[index-1].className="on";
}
动画切换函数
function animation2(offset){
   获取元素
   var oImgBox = document.getElementById("imgBox");
   运动总时间 1000ms=1s
   var time = 300;
   每一次小运动的间隔时间
   var interval = 15;
   每一次小运动的距离
   var speed = offset/(time/interval);
   计算目标值
   var newLeft = parseInt(oImgBox.style.left)+offset;
   go();
   运动函数
   function go(){
       当speed>0;目标值始终大于运动过程中的left值；&&并且
       当speed<0;目标值始终小于运动过程中的lsft值；||或者
       if((speed>0&&parseInt(oImgBox.style.left)<newLeft)||(speed<0&&parseInt(oImgBox.style.left)>newLeft)){
           oImgBox.style.left = parseInt(oImgBox.style.left)+speed+"px";
           递归调用
           setTimeout(go,interval);
       }else{
           oImgBox.style.left = newLeft+"px";
           判断是否到了第一张图片的位置
           if(newLeft<-2500){
               oImgBox.style.left = -500+"px";
           }
           判断是否到了第五张图片的位置
           if(newLeft>-500){
               oImgBox.style.left = -2500+"px";
           }
       }
   }
}

html用来布局，搭建整个页面。装图片的盒子设置足够宽，让图片左浮，排成一排，最后一张重新放置第一张。

总而言之，就是将图片套在ul li中，把它放在一个大的div里，并放在页面的固定位置。当ul超出div部分，就用overflow：hidden隐藏。

js知识点：声明全局变量获取元素封装绑定事件的DOM元素

最后的最后，如果有什么不对的地方请多多指教哇！！！

邻居三苏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单轮播图

（一）实现的效果1.点击左右按钮切换图片（二）基本布局1.图片横向排列，借助overflow：hidden；让显示区域以外的内容不显示就行了（三）动画效果1.通过JS实现动画效果，调用animation()函数（四）实现无缝切换效果1.当轮播图翻页时，是完整的一张图均匀翻过去，将第一张图片复制添加到末尾起到过度作用<!doctype html><html><head><meta charset="utf-8"><
复制链接

扫一扫