简单的JQuery轮播图
- 2015-10-14 13:12:57
- 幻音い
- 13788
温馨提示: 这篇文章于3284天前编写,现在可能不再适用或落后.
轮播图在很多网站都会出现,有横向轮播图、纵向轮播图、淡入淡出轮播图、3D轮播图……等等
本站使用的是JQ制作的轮播图。 接下来我们用一个简单的JQ程序实现简单的轮播切换
准备工具:
1.JQ类库一份
2.html编辑器
3.浏览器(推荐最新火狐或谷歌)
远离IE—珍爱生命
如果有JQ类库的小伙伴就不用管下面这一步,如果没有JQ的可以用下面这个代码使用百度的JQ
//使用百度jq类库
<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
过程很快的,不会太麻烦,CSS和HTML我会直接发出来并写上一些重要的注释,该文章主要是用JQ
<div class="container">
<div class="pic">//4张轮播图片 start
<div class="content" style="display:block;">//单独的一个图片div设置默认显示
<a href="#">
<img src="img/1.jpg" alt=""/>
</a>
</div>
<div class="content">
<a href="#">
<img src="img/2.jpg" alt=""/>
</a>
</div>
<div class="content">
<a href="#">
<img src="img/3.jpg" alt=""/>
</a>
</div>
<div class="content">
<a href="#">
<img src="img/4.jpg" alt=""/>
</a>
</div>
</div>//4张轮播图片 end
<div class="btn">
<ul>
<li class="but"></li>//单独的一个类设置默认样式
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
css:
*{
margin:0;//初始化就不说了
padding:0;
}
.container{
width:400px;//设置整个包裹图片和按钮的盒子宽度高度以及居中显示
height:200px;
margin:20px auto 0;
}
.content{//所有的图片都初始化为不显示,并设置绝对定位 PS:第一张图在html中设置display:block;默认显示
display:none;
position:absolute;
}
.content a img{//设置图片默认宽度高度
width:400px;
height:200px;
}
/*轮播按钮*/
.btn{
position:relative;//使用相对定位设置 右浮动 距离顶部定位180px
float:right;
top:180px;
z-index: 9999;//设置按钮在最顶层 以免按钮被淹没在图片最下面
}
.btn ul li{
width:10px;
height:10px;
border-radius:50%;//圆形按钮
list-style-type:none;//初始化li圆点
display:inline-block;//横向排列 其实左浮动也可以
background: #9e9d9c;
cursor:pointer;
}
/*轮播时按钮样式*/
.btn ul li.but{//JQ使用的时候点击按钮改变颜色
background: #53baff;
}
最重要的JQ脚本 其实轮播的jq很简单,只有几行代码即可实现轮播效果
<script type="text/javascript">
var i = 0;//设置i并初始化为0(因为程序都是0开始的)
$(".btn ul li").click(function () { //当轮播下面的按钮被点击的时候
i = $(this).index();//将点击的元素下标(位置,第一个为0,第二个为1……)赋值给i以便后面使用
//然后将当前图片用eq索引当前按钮位置,并淡出(消失)遍历进入第二张图片
$(".container .content").eq(i).fadeIn().siblings().fadeOut();
//使用this关键字后就可以不用eq索引了因为本身就是点击的按钮
//将当前点击的按钮类换成预先在css里面设置好的 "but"类,同样的遍历之后清除此类
$(this).addClass("but").siblings().removeClass("but");
//之后。。一个简单的点击轮播图实现了
});
//轮播图毕竟是要自动轮播的接下来就用js的定时函数setInterval()来定时更换轮播的图片与按钮的类
function start() {//自定义函数 start()用来定时更换
i++;//将全局变量i自增1
if (i > 3)//判断如果大于3(因为只有4张图片 0 1 2 3)
i = 0;//就把i初始化为0(转到第一张图片)
$(".container .content").eq(i).fadeIn().siblings().fadeOut();//之后的和点击一样了,可以看看上面的
//此处需要注意,因为是自动轮播的,所以需要用eq来索引当前图片的位置,来修改按钮类
$(".btn ul li").eq(i).addClass("but").siblings().removeClass("but");
}
setInterval("start()", 3000);
</script>
然后就……没有然后了……一个简单的自动、点击轮播图就做完了,本站的轮播图添加了左右切换……这个原理也是很简单的,判断当前i位置在根据图片数量进行切换
阁下需要登录后才可以查看评论哦~