JQuery特效之一---轮播图

最新推荐文章于 2022-04-14 18:37:38 发布

Eric010101

最新推荐文章于 2022-04-14 18:37:38 发布

阅读量153

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/oneil2016/article/details/84632625

版权

JavaWeb 专栏收录该内容

85 篇文章 2 订阅

订阅专栏

前端三大组成

html构建内容，css美化，js控制交互，jquery是一个常用js库。

使用jquery实现一个轮播图。先看html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/style.css"/>
</head>
<body>
<!--
    <nav class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">教程</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <button class="btn btn-primary" id="clickme">点我</button>
    </div>
-->
    <div id="igs">
    
    <img class="ig" src="static/imgs/01.jpg" alt="01">
    <img class="ig" src="static/imgs/02.jpg" alt="02">
    <img class="ig" src="static/imgs/03.jpg" alt="03">
    <img class="ig" src="static/imgs/04.jpg" alt="04">
    </div>
    
    <div class="btn btn1"><</div>
    <div class="btn btn2">></div>
    
    <div id="tabs">
        <div class="tab bg">1</div>
        <div class="tab">2</div>
        <div class="tab">3</div>
        <div class="tab">4</div>
    </div>
    
    
    
    <script src="static/lib/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="static/js/style.js"></script>
</body>
</html>

css代码如下:

body{
text-align:center;
margin-left:auto;
margin-right:auto;
}
.btn{
    position: absolute;
    height: 90px;
    width: 60px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    line-height: 90px;
    font-size: 40px;
    top: 150px;
    cursor: pointer;
}


.btn2{
left: 1110px;
    top:180px;
}
.btn1{
left:360px;
    top:180px;
}

#tabs{
    position: absolute;
    top: 500px;
    left: 680px;
}
.tab{
    width: 30px;
    height:30px;
    background-color:blueviolet;
    float: left;
    text-align: center;
    line-height: 30px;
    color: beige;
    margin-right: 10px;
    border-radius: 100%;
    cursor: pointer;
}
.bg{
    background-color: red;
}

js控制代码如下：

var i=0;
var timer;
$(function(){
$("#clickme").click(function(){
    alert("Hello World!");
});
   
    $(".ig").eq(0).show().siblings().hide();
    
    showTimer();
    
    
    $(".tab").hover(function(){
    i=$(this).index();
    myshow();
    clearInterval(timer);
    },function(){
    
    showTimer();
    });
    
    $(".btn1").click(function(){
    clearInterval(timer);
    if(i==0){
    i=4;
    }
        i--;
    myshow();    
    showTimer();
    });
    
    $(".btn2").click(function(){
    clearInterval(timer);
    if(i==3){
    i=-1;
    }
        i++;
    myshow();    
    showTimer();
    });
    
});

function showTimer(){
timer = setInterval(function(){
    i++;
    if(i==4){
    i=0;
    }
    myshow();
},4000);
}

function myshow(){
$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
    $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}

需要的图片自己网上找几张即可。

整个项目结构如下：

Eric010101

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery特效之一---轮播图

前端三大组成html构建内容，css美化，js控制交互，jquery是一个常用js库。使用jquery实现一个轮播图。先看html代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&am
复制链接

扫一扫