HTML——轮播图

轮播图
一、

首先制作轮播图需要几个元素，图片（大小最好一致）、焦点（这个可以自己写）、左右箭头的按钮
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="styles.css">-->
    <script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function (){
            var num =0;
            //让第一个焦点变为蓝色
            $(".focus_li").eq(0).css("background","#0aa1ed");
            //动态获取ul的宽度
            //轮播图的移动是左右移动而且不是闪动所以不能用setInterval周期定时器
            $("#banner").width($('.oLi').length*$('.oLi').eq(0).width())
            //轮播的方法
            function bannerLeft(){
                if(num>2){
                    num=0;
                }else{
                    num++;
                }
                $("#banner").animate({left:-$(".oLi").eq(0).width()*num},1000);
                //animate移动函数   animate（偏移位置，执行时间，回调函数）
                //焦点轮播
                $(".focus_li").eq(num).css("background","#0aa1ed")
                    .siblings('li').css("background","#ffffff");
                //siblings除了当前结点外其他的兄弟节点
            }
            var id =setInterval(bannerLeft,1000);
            //鼠标划上去则停止
            $("#banner_wrap").mouseover(function (){
                clearInterval(id)
            });
            //鼠标划出去则继续
            $("#banner_wrap").mouseout(function (){
                id=setInterval(bannerLeft,1000);
            });
            //向右轮播
            function bannerRight(){
                if(num===0){
                    num=3;
                }else{
                    num--;
                }
                $("#banner").animate({left:-$(".oLi").eq(0).width()*num},1000);
                //焦点轮播
                $(".focus_li").eq(num).css("background","#0aa1ed")
                    .siblings('li').css("background","#ffffff");
            }
            $(".left").click(function (){//添加单击事件
                $("#banner").stop();//需要先停止动画
                bannerLeft();
            });
            $(".right").click(function (){
                $("#banner").stop();
                bannerRight();
            });
            //焦点控制
            $(".focus_li").mouseover(function (){
                $("#banner").stop();
                //焦点的位置正好与数组的下标符合可以通过获取数组下标获取焦点的位置
                num =$(this).index()//获取数组下标
                $("#banner").animate({left:-$(".oLi").eq(0).width()*num},1000);
                //焦点轮播
                $(".focus_li").eq(num).css("background","#0aa1ed")
                    .siblings('li').css("background","#ffffff");
            });
        });
    </script>
    <style type="text/css">
        *,ul,a{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;/*超链接下划线*/
        }
         #banner_wrap{
            height:400px;
            width:1000px;
            margin: 70px auto;
             border:1px solid #dddddd;
             overflow: hidden;/*盒子溢出的部分不显示*/
             position: relative;/*相对定位*/
        }
         #banner{
             height: 400px;
             width: 4000px;
             position: absolute;/*完全定位*/
         }
         .oLi{
             width: 1000px;
             height: 400px;
             float: left;
         }
         .btn{
             width:35px;
             height: 70px;
             background: #ff0000;
             position: absolute;
             z-index: 2;
             opacity:.15;/*透明度*/
             top:50%;
             margin-top: -35px;
             border-radius: 3px;/*方框的边角弧度*/
             cursor: pointer;/*鼠标放到上面的样式*/
         }
         .right{
             left: 960px;
             background: url("../day12/images/index/arrow-right.png") #000000 no-repeat 50%;
         }
         .left{
             left: 5px;
             background: url("../day12/images/index/arrow-left.png") #000000 no-repeat 50%;
         }
         /*用伪类选择器做出鼠标放置在div相框中左右箭头的淡入淡出*/
         #banner_wrap:hover>.btn{
             opacity: 0.4;
         }
         .focus{
             width: 108px;
             height: 20px;
             position: absolute;
             z-index:3;
             left:50%;
             margin-left: -54px;
             bottom: 12px;
         }
         .focus>.focus_li{
             width: 12px;
             height: 12px;
             background: #FFFFFF;
             float: left;
             border-radius: 50%;
             margin: 4px 4px;
         }
    </style>
</head>
<body>
    <div id="banner_wrap">
        <ul id="banner">
            <li class="oLi">
                <a herf="#"><img src="../day12/images/itemCat/itemCat_banner1.png"></a>
            </li>
            <li class="oLi">
                <a herf="#"><img src="../day12/images/itemCat/itemCat_banner2.png"></a>
            </li>
            <li class="oLi">
                <a herf="#"><img src="../day12/images/itemCat/itemCat_banner3.png"></a>
            </li>
            <li class="oLi">
                <a herf="#"><img src="../day12/images/itemCat/itemCat_banner4.png"></a>
            </li>
        </ul>

        <ul class="focus">
            <li class = focus_li></li>
            <li class = focus_li></li>
            <li class = focus_li></li>
            <li class = focus_li></li>
        </ul>

        <div class="btn left"></div>
        <div class="btn right"></div>
    </div>
</body>
</html>
二、素材

在这里插入图片描述
原文链接：https://blog.csdn.net/weixin_45951601/article/details/111274341
你可能也喜欢
