固定尺寸轮播图（非插件）

最新推荐文章于 2022-04-02 16:53:53 发布

原创最新推荐文章于 2022-04-02 16:53:53 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

30 篇文章

订阅专栏

实现后的效果
这里写图片描述

html

<!DOCTYPE html>
<!--声明 本页面语言为中文-->
<html lang="en">
<head>
    <!--使用编码为 utf-8 -->
    <meta charset="UTF-8">
    <title>固定尺寸 轮播图</title>
    <!--全局初始化样式-->
    <link rel="stylesheet" href="css/css.css">
    <!--轮播图样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="lunbo">
    <div class="con">
        <!--轮播图主体-->
        <ul class="img_con">
            <li><a href="#"><img src="img/1.jpg" alt="1图"></a></li>
            <li><a href="#"><img src="img/2.jpg" alt="2图"></a></li>
            <li><a href="#"><img src="img/3.jpg" alt="3图"></a></li>
            <li><a href="#"><img src="img/4.jpg" alt="4图"></a></li>
            <li><a href="#"><img src="img/5.jpg" alt="5图"></a></li>
        </ul>
        <!--焦点元素-->
        <ul class="img_jiao">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul> 
    </div>
    <!--左箭头-->
    <div class="left_arrows arrows">
        <img src="img/left.svg" alt="左箭头">
    </div>
    <!--右箭头-->
    <div class="right_arrows arrows">
        <img src="img/right.svg" alt="右箭头">
    </div>
</div>
    <!--JQ库文件-->
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <!--轮播图JS文件-->
    <script type="text/javascript" src="js/style.js"></script>
</body>
</html>

css初始化文件

/* CSS Document */
html, body, div, span, object, iframe,h1, h2, 
h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, 
em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, 
ol, ul, li,fieldset, form, label, legend,table, caption, tbody, 
tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption, 
figure, footer, header, hgroup, menu, nav, section, summary,time, mark, 
audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    outline-style:none;/*FF浣跨敤*/ 
}

body {
    line-height:1;
}

a{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;

}
a:hover,a:focus{
    text-decoration:none;
    bblr:expression(this.onFocus=this.blur());/*IE浣跨敤*/
    outline-style:none;/*FF浣跨敤*/ 
    }
table {
    border-collapse:collapse;
    border-spacing:0;
}

input, select {
    vertical-align:middle;
}
ul,li{
    list-style-type: none;
}

css

.lunbo{
    position: absolute;
    width: 548px;
    left: 27%;
    top: 10%;
}
/*轮播主体*/
.lunbo .con{
    width: 460px;
    height: 290px;
    border: 1px solid #aaa;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    -moz-box-shadow: 5px 7px 5px #888888; /* 老的 Firefox */
    box-shadow: 5px 7px 5px #888888;
}
/*给予轮播图盒子固定尺寸*/
.con .img_con{
    width: 3000px;
    height: 290px;
}
.con .img_con li{
    position: relative;
    float: left;
}
.con .img_con li img{
    height: 290px;
    width: 460px;
}
/*焦点元素*/
.con .img_jiao{
    position: absolute;
    right: 40%;
    bottom: 10px;
}
.con .img_jiao li{
    float: left;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: aliceblue;
    margin: 3px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    border: 1px solid #aaa;
}
/*焦点特殊样式*/
.con .img_jiao li.on{
    background-color: coral;

}
/*左右箭头共同CLASS*/
.lunbo .arrows img{
    width: 43px;
    height: 46px;
    position: absolute;
    top: 40%;
}
/*鼠标划过箭头效果*/
.lunbo .arrows:hover{
    cursor: pointer;
}
/*左箭头*/
.lunbo .left_arrows img{
    left: 0;
}
/*右箭头*/
.lunbo .right_arrows img{
    right: 0;
}


var img_c = $(".img_con li");//获取轮播图元素
var imw = img_c.eq(0).width();//获取轮播图第一位元素的宽度
var img_i = $(".img_jiao li");//获取焦点元素
var left_a = $(".left_arrows");//左箭头
var right_a = $(".right_arrows");//右箭头
var arrows = $(".arrows");//箭头共同类
var i = 0;
var time;//全部变量 用承载计时事件
var set_time = 1500;
/*鼠标移入到焦点触发事件*/
img_i.mouseover(function(){
    clearInterval(time);//停止计时事件
    i = img_i.index(this);//获取当前焦点索引值
    $(this).addClass("on").siblings().removeClass("on");//给当前焦点元素添加CLASS
    img_c.stop().animate({right:imw*i});//去到指定焦点位置 并停止动画
});
/*鼠标移出焦点触发事件*/
img_i.mouseout(function(){
    time = setInterval("automatic()",set_time);
});
/*轮播自动运行函数*/
function automatic(){
    arrows_a(1);
}
time = setInterval("automatic()",set_time);//每隔1.5秒触发计时事件
/*轮播主体代码*/
function arrows_a(s){
    i += s;
    clearInterval(time);
    /*当轮播图到第一张时 再点击 返回到最后一张*/
    if(i<0){
        i=img_c.length -1;
    }
    /*当轮播到最后一张时 再点击 返回到第一张*/
    if(i>=img_i.length){
        i=0;
    }
    img_c.stop().animate({right:imw*i});
    img_i.eq(i).addClass("on").siblings().removeClass("on");
    time = setInterval("automatic()",set_time);
}
/*左箭头*/
left_a.click(function(){
    arrows_a(-1);
});
/*右箭头*/
right_a.click(function(){
    arrows_a(1);
});