close

网站前端

站前端

新手简易jquery轮播思路与代码讲解(对于新手、老手勿喷谢谢!)

Jquery

最近身边几位朋友问我js与jquery的问题、其实这个东西很简单不能这么说、只能说做一些小东西很简单、但是很多特效混淆的时候就比较尴尬了。但是今天不讲很难、咱们就做一个每一个网站肯定要用的轮播效果、文章如果有错误欢迎反馈、如果你是一位WEB大佬就别看了、免得看着恶心!谢了。这是给新手入门看看玩玩罢了、真实有千万种写法!勿当真!

首先打开软件、我个人用HBuilder这款软件写WEB、还是挺不错的!

新建项目-名字自取-包含三个文件(js)、(css)、(img)、当然你也可以在html里面直接写内链css和js都是没问题!

项目样式

然后HTML页面写入内容:代码如下

<html>
<head>
    <title>js轮播</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/js.css" />
    <script type="text/javascript" src="js/jquery.min.js" ></script> --这里是需要一个jQuery的包的
    <script type="text/javascript" src="js/lb.js" ></script>--这是咱们js文件夹里面的自己写的js
</head>
<body>
    <div id="lb">--定义一个框
        <a class="lb1" href="https://www.6r6.cc"><img src="img/4.png" style="width: 1000px;height:500px ;"></a>--定义图片
        <a class="lb1" href="https://www.6r6.cc""><img src="img/xinbanner00.jpg" style="width: 1000px;height:500px ;"></a>--定义图片
        <a class="lb1" href="https://www.6r6.cc""><img src="img/xinbanner02.jpg" style="width: 1000px;height:500px ;"></a>--定义图片
        <div class="btn btn1"><</div>--定义左右按钮(left)
        <div class="btn btn2">></div>--定义左右按钮(right)
        <ul id="tabs">--定义底部 1-2-3的按钮样式
            <li class="tab">1</li>
            <li class="tab">2</li>
            <li class="tab">3</li>
        </ul>
    </div>
</body>
</html>

上面是一个完整的HTML页面 并且也做了注释!如果你需要直接复制的话请删除掉–xxxx这些东西 因为在HTML页面中注释不是这样的哦!小编在网站上用markdown编辑就懒得写标准了!

然后在css页面新建一个css文件 代码如下:

*{
margin: 0 auto;
padding: 0;
text-decoration: none;
list-style: none;
}
.bg{
background-color: #fff;
}
#lb{
width: 1000px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.lb1{
position: absolute;
}
#tabs{
position: absolute;
float: left;
left: 500px;
bottom: 10px;
border-radius: 10px;
padding: 5px 0 5px 0px;
}
.tab{
height: 20px;
float: left;
width: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
overflow: hidden;
border-radius: 100%;
background-color:#0077e6;
margin-right: 10px;
}
.btn{
position: absolute;
color: #f3f3f3;
top: 200px;
width: 40px;
height: 100px;
font-size: 80px;
font-weight: bolder;
border-radius: 5px;
line-height: 100px;
}
.btn2{
position: absolute;
right: 0px;
}
.btn:hover{
background-color: #F3F3F3;
color: #000;
opacity: 0.8;
}

现在来Js部分

//定义全局变量和定时器
var i = 0;
var timer;
  //用jquery方法设置第一张图片显示,其余隐藏
$(document).ready(function(){
$('#lb').eq(0).show().siblings('#lb').hide();
 //调用showTime()函数(轮播函数)
showTime();
//当鼠标经过下面的数字时,触发两个事件(鼠标悬停和鼠标离开)
$('.tab').hover(function(){
 //获取当前i的值,并显示,同时还要清除定时器
    i = $(this).index();
    Show();
    clearInterval(timer);
},function(){
    showTime();
});
 //鼠标点击左侧的箭头
$('.btn1').click(function(){
    clearInterval(timer);
    if(i == 0 ){
        i = 3
    }
    i--;
    Show();
    showTime();
});
//鼠标点击右侧的箭头
$('.btn2').click(function(){
    clearInterval(timer);
    if(i == 2){
        i = -1;
    }
    i++;
    Show();
    showTime();
});
});
//创建一个showTime函数

function showTime(){
timer = setInterval(function(){
//调用一个Show()函数
    show();
    i++;
     //当图片是最后一张的后面时,设置图片为第一张
    if(i==3){
        i=0;
    }
},2000);
}
//创建一个Show函数
function Show(){
$('.lb1').eq(i).fadeIn(300).siblings('.lb1').fadeOut(300);
$('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');

}

至此代码完成 运行一下(HTML是可以直接运行的哦)

若有不详细的地方欢迎加群讨论哟 487163638 也欢迎web前端爱好者加入我们

read more