jquery⼿写轮播图_jquery实现轮播图详解及实例代码_jquery_
脚本之家
轮播图：
jquery做轮播图的例⼦：
html部分代码：
轮播图
<>
1
2
3
4
5
css部分代码：
* {
margin: 0;
padding: 0;
}
#igs {
margin: 10px auto;
width: 700px;
height: 320px;
position: relative;
}
.ig {
position: absolute;
}
#tabs {
position: absolute;
list-style: none;
background-color: rgba(255,255,255,.5);
left: 300px;
bottom: 10px;
border-radius: 10px;
padding: 5px 0 5px 5px;
}
.tab{
float: left;
text-align: center;
line-height: 20px;
width: 20px;
height: 20px;
cursor: pointer;
overflow: hidden;
margin-right: 4px;
border-radius: 100%;
background-color: rgb(200,100,150);
}
.btn{
position: absolute;
color: #fff;
top: 110px;
width: 40px;
height: 100px;
background-color: rgba(255,255,255,.3); font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 100px;
border-radius: 5px;
margin: 0 5px;
}
.btn2{
position: absolute;
right: 0px;
}
.btn:hover{
background-color: rgba(0,0,0,.7);
}
js部分代码：
//定义全局变量和定时器
var i = 0 ;
var timer;
$(document).ready(function(){
//⽤jquery⽅法设置第⼀张图⽚显⽰，其余隐藏
$('.ig').eq(0).show().siblings('.ig').hide();
//调⽤showTime()函数(轮播函数)
showTime();
//当⿏标经过下⾯的数字时，触发两个事件(⿏标悬停和⿏标离开) $('.tab').hover(function(){
/
/获取当前i的值，并显⽰，同时还要清除定时器
i = $(this).index();
Show();
clearInterval(timer);
},function(){
//
showTime();
});
//⿏标点击左侧的箭头
$('.btn1').click(function(){
clearInterval(timer);
if(i == 0){
i = 5;//注意此时i的值
}
i--;
Show();
showTime();
});
//⿏标点击右侧的箭头
$('.btn2').click(function(){
js简易轮播图代码clearInterval(timer);
if(i == 4){
i = -1;//注意此时i的值
}
i++;
Show();
showTime();
});
});
//创建⼀个showTime函数
function showTime(){
//定时器
timer = setInterval(function(){
/
/调⽤⼀个Show()函数
Show();
i++;
//当图⽚是最后⼀张的后⾯时，设置图⽚为第⼀张
if(i==5){
i=0;
}
},2000);
}
//创建⼀个Show函数
function Show(){
/
/在这⾥可以⽤其他jquery的动画
$('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
//给.tab创建⼀个新的Class为其添加⼀个新的样式，并且要在css代码中设置该样式
$('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');
/*
* css中添加的代码：
* .bg{ background-color: #f00; }
* */
}
完成效果图：
关于jquery做轮播图更多的思考
思考⼀：在第七⾏代码中⽤jquery⽅法设置第⼀张图⽚显⽰，其余隐藏，我们还有没有其他⽅法可以实现？思路：通过jquery的筛选器来实现
代码⽰例：
$("#igs a:not(:first-child)").hide()；
扩展：这样来看的话，在a标签中的class我们都可以省略，于此同时我们对于jquery选择器的了解要更深⼊。
思考⼆：在第64⾏代码中，我们创建了⼀个Show函数，在这⾥我们只能看到简单的效果，我们能不能将我们的动画效果做的更炫？
思路：⽤jquery中的⾃定义动画，为其设置多个动画效果
代码⽰例：
//代码提⽰：可以⽤fadeIn()、fadeOut()、fadeTo()、animate()等，具体实现⽅法请查阅相关资料
思考三：如果我们在原来的基础上在增加⼀张或多张图⽚，我们⼜要修改我们的代码了，我们可不可以
将该段代码适⽤到更多的轮播图中？思路：我们在前⾯设置⼀个计数器count，通过DOM的⽅法获取到图⽚的数量
代码⽰例：
var count;
$(document).ready(function(){
count= $(".main a").length; /*给动态变化的i备⽤*/;
//。。。代码省略
//⿏标点击左侧的箭头
$('.btn1').click(function(){
clearInterval(timer);
if(i == 0){
i = count;//注意此时i的值
}
i--;
Show();
showTime();
});
//⿏标点击右侧的箭头
$('.btn2').click(function(){
clearInterval(timer);
//console.log(count-1);
if(i == count-1){
i = -1;//注意此时i的值
}
i++;
Show();
showTime();