简单的HTML轮播

最新推荐文章于 2024-09-11 23:16:45 发布

Outsider07

最新推荐文章于 2024-09-11 23:16:45 发布

阅读量325

点赞数

分类专栏： HTML 文章标签： html css

本文链接：https://blog.csdn.net/Outsider07/article/details/115303506

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单的HTML轮播

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./css/banner.css"/>
    </head>
    <body>
        <!--页面结构-->
        <div id="contents" class="content">
            <div id="btn_prev" class="btn_ctrl"> &lt; </div>
            <div id="btn_next" class="btn_ctrl"> &gt; </div>
            <ul id="img_list">
                <li><img src="../img/Chrysanthemum.jpg" alt="" /></li>
                <li><img src="../img/Desert.jpg" alt="" /></li>
                <li><img src="../img/Hydrangeas.jpg" alt="" /></li>
                <li><img src="../img/Jellyfish.jpg" alt="" /></li>
                <li><img src="../img/Koala.jpg" alt="" /></li>
                <li><img src="../img/Lighthouse.jpg" alt="" /></li>
            </ul>
            <!--控制圆点-->
            <ul id="icon_list">
                
            </ul>
        </div>
        <!--轮播-->
        <script type="text/javascript">
            window.onload = function(){
                //获取ul
                var imgList = document.getElementById('img_list');
                //获取li
                var liImg = document.getElementsByTagName('li');
                //获取左按钮
                var btnPrev = document.getElementById('btn_prev');
                //获取右按钮
                var btnNext = document.getElementById('btn_next');
                //获取圆点ul
                var iconList = document.getElementById('icon_list');
                //获取圆点的ul的li子元素
                var liIcon =  iconList.children;
                //获取li的宽度
                liWidth = liImg[0].offsetWidth;
                //设定图片的顺序编码
                index = 0;
                //设定圆点的顺序编码
                circle = 0;
                //克隆图片     目的：产生无缝效果
//                imgList.appendChild(liImg[0].cloneNode(true))
                //生成圆点
                for(var i = 0,lilen = liImg.length;i<lilen;i++){
                    //创建li圆点元素
                    var li = document.createElement('li');
                    li.innerHTML = i + 1;
                    //把圆点li加入圆点ul
                    iconList.appendChild(li);
                }
                //改变圆点 样式
                liIcon[0].className = 'clur';
                //轮播效果--自动切换动画
                function bannerAnimate(obj,tragetPlace){
                    //清除自动效果
                    clearInterval(obj.timer)
                    obj.timer = setInterval(function(){
                        //判断左移和右移的速度
                        var speed = obj.offsetLeft > tragetPlace ? -60:60;
                        var result = tragetPlace - obj.offsetLeft;
                        //判断移动的差值，如果大于速度 让图片移动 --改变left
                        if(Math.abs(result)>Math.abs(speed)){
                            obj.style.left = obj.offsetLeft + speed + 'px';
                        }
                        else{
                            obj.style.left = tragetPlace + 'px';
                            clearInterval(obj.timer)
                        }
                    },20)
                }
                
                //向右切换
                function moveRight(){
                    index--;  //设定图片切向右面的下一张图
                    if(i<0){
                        //调整ul显示图片的一个位置，使后面的图片到前面来
                        imgList.style.left = -(liImg.length - 6) * liWidth + 'px';
                        //寻找倒数第二张图片
                        index = liImg.length/2-1;
                    }
                    //调用自动切换效果
                    bannerAnimate(imgList,-index * liWidth);
                    //小圆点跟着一起变
                    circle--;
                    if(circle<0){
                        //返回第一个圆点
                        circle = liImg.length/2-1;
                    }
                    //改变样式
                    for (var i = 0 ,iconLen = liIcon.length; i<iconLen;i++) {
                        liIcon[i].className = "";
                    }
                    liIcon[0].className = 'clur';
                }
                
                //向左 （设定为自动切换顺序）
                function autoLeft(){
                    index++;
                    if(index > liImg.length - 7){
                        imgList.style.left = 0;
                        index = 1;
                    }
                    //调用自动切换效果
                    bannerAnimate(imgList,-index * liWidth);
                    //小圆点跟着一起变
                    circle++;
                    if(circle >= liImg.length - 7){
                        circle = 0;
                    }
                    for (var i = 0 ,iconLen = liIcon.length; i<iconLen;i++) {
                        liIcon[i].className = "";
                    }
                    //改变样式
                    liIcon[circle].className = 'clur';
                }
                
                imgList.addEventListener('mouseenter',function(){
                    clearInterval(interval)
                })
                
                imgList.addEventListener("mouseleave",function(){
                    interval = setInterval(autoLeft,4000);
                })
                
                interval = setInterval(autoLeft,4000);
                //圆点点击
                iconList.addEventListener('click',function(){
                    clearInterval(interval);
                    var taget = event.target;
                    var mytaget = event.currentTarget;
                    index = taget.innerHTML - 1;
                    circle = index;
                    for(var i = 0,iconlen = liIcon.length; i<iconlen;i++ ){
                        //清除其它圆点样式
                        liIcon[i].className ="";
                    }
                    //当前选中圆点样式变化
                    liIcon[circle].className = 'clur';
                    //调用自动切换效果
                    bannerAnimate(imgList,-index * liWidth);
                })
                //添加按钮点击效果
                btnPrev.addEventListener('click',function(){
                    clearInterval(interval);
                    moveRight();
                })
                
                btnNext.addEventListener('click',function(){
                    clearInterval(interval);
                    autoLeft();
                    
                })
                
            }
        </script>
    </body>
</html>

CSS：

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 #contents{
 6     position: relative;
 7     width: 1024px;
 8     height: 768px;
 9     border: 2px solid red;
10     overflow: hidden;
11     margin-left: 300px;
12 }
13 .btn_ctrl{
14     position: absolute;
15     top:48%;
16     font-size: 40px;
17     color: aqua;
18     font-weight: bold;
19     z-index: 3;
20 }
21 #img_list{
22     width: 600%;
23     position: absolute;
24     left: 0;
25     top: 0;
26 }
27 #btn_prev{
28     left: 0;
29 }
30 #btn_next{
31     right: 0;
32 }
33 #img_list li{
34     float: left;
35     list-style: none;
36 }
37 /*圆点样式*/
38 .clur{
39     background: rgba(255,255,255,.6);
40 }
41 #icon_list{
42     position: absolute;
43     left: 30%;
44     bottom: 40px;
45 }
46 #icon_list li{
47     float: left;
48     list-style: none;
49     width: 25px;
50     height: 25px;
51     font-size: 24px;
52     line-height: 25px;
53     text-align: center;
54     color: azure;
55     margin-left: 20px;
56     border-radius: 50%;
57     display: inline-block;
58 }