HTML——轮播图_html轮播图

作者：从前慢现在也慢 | 2024-06-01 01:45:22
踩
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
二、素材
在这里插入图片描述
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/655382