JQuery中的轮播图demo

JQuery库中的插件来写轮播图，虽然其库用起来甚是方便，简介 ，提高了工作 效率。下边我就为大家提供一种JQuery的轮播图：

index.html 文件结构如下：

//一定要先引入js文件、css文件
<div class="con_wrap">
<div class="tit_wrap">
<h1>JS原生轮播图</h1>
<div class="box">
<ul id="ul">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<div class="box-arrow">
<span id="arr-left"><</span>
<span id="arr-right">></span>
</div>
<ul class="box-circle"></ul>
</div>
</div>

style.css 文件如下：

body {
/*初始化样式*/
margin: 0;
padding: 0;
}

.box {
/*给盒子定义样式*/
width: 1100px;
height: 400px;
overflow: hidden;
position: relative;//相对定位
}

.box ul {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
}

.box li {
float: left;
width: 1100px;
height: 400px;
}

.box ul img {
width: 100%;
height: 100%;
display: block;
}

.box-arrow {
position: absolute;//绝对定位
left: 0;
top: 50%;
margin-top: -35px;
width: 100%;
display: none;
}

.box-arrow span {
color: white;
font-size: 40px;
cursor: pointer;
display: block;
background-color: black;
width: 30px;
text-align: center;
/*禁用用户选中文本*/
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}

#arr-left {
float: left;
}

#arr-right {
float: right;
}

.box-circle {
position: absolute;
bottom: 20px;
left: 50%;
}
.box-circle li {
width: 20px;
height: 20px;
text-align: center;
position: relative;
left: -50%;
background-color: black;
cursor: pointer;
color: white;
font-size: 12px;
line-height: 15px;
font-family: 'Microsoft YaHei';
margin-right: 10px;
border-radius: 11px;
}
.box-circle li.hover {
background-color: orangered;
}

index.js

$(function(){
//切换显示箭头
$('.box').on('mouseover',function(){//鼠标覆盖时，显示箭头，关闭自动轮播
clearInterval(timer);
$('.box-arrow').show();
}).on('mouseleave',function(){//鼠标离开时，隐藏箭头，开启自动轮播
$('.box-arrow').hide();
autoPlay();
});
//目标索引值
var targetIndex = 0;
//定时器句柄
var timer=null;
//是否执行轮播的标识
var flag = true;
//轮播时，操作位置的元素
var ul = $('#ul');
//每个图片的宽度
var width = 0 - $('.box li:eq(0)').width();
//复制第一个li元素，append到最后
$('#ul').append($('#ul li:eq(0)').clone()).width(Math.abs(width)*$('#ul>li').length);
var count = $('#ul>li').length;
//轮播图片的方法
function play(){
if(flag){//标识为true时，执行轮播
flag=false;//执行轮播前，将标识符设为false
//计算小圆点索引
var circleIndex = targetIndex;
if(targetIndex>(count-2)){
circleIndex = 0;
}
if(targetIndex<0){
circleIndex = count-2;
}
//根据索引，修改小圆点样式
$('.box-circle li:eq('+circleIndex+')').addClass('hover')
.siblings().removeClass('hover');
//使用animate方法轮播图片
$(ul).animate({'left':targetIndex*width+'px'},500,function(){
flag=true;//执行轮播完毕后，将标识符设为true
});
}
}
//点击向右移动
$('#arr-right').on('click',function(){
if(!flag){//当标识符为false时，禁止更改目标索引值和执行轮播动画
return;
}
if(targetIndex+1 > count-1){
targetIndex = 1;
$(ul).css('left','0px');
}else{
targetIndex++;
}
play();
});
//点击向左移动
$('#arr-left').on('click',function(){
if(!flag){//当标识符为false时，禁止更改目标索引值和执行轮播动画
return;
}
if(targetIndex-1 < 0){
targetIndex = count-2;
$(ul).css('left',(targetIndex+1)*width+'px');
}else{
targetIndex--;
}
play();
});
//自动轮播的方法
function autoPlay(){
timer = setInterval(function(){
$('#arr-right').trigger('click');
},2000);
}
//执行自动轮播
autoPlay();
//循环创建小圆点
for(var i=0; i<count-1; i++){//因为count包含克隆的元素，所以需要count-1
var hoverClass = '';
if(i==0){
hoverClass = 'hover';
}
$('.box-circle').append('<li class="'+hoverClass+'">'+(i+1)+'</li>');//向页面添加小圆点
}
//小圆点的鼠标覆盖事件
$('.box-circle li').on('mouseover',function(){
$(this).addClass('hover').siblings().removeClass('hover');//切换样式
//索引检测，当索引在最后一张克隆图片上、覆盖到第一个小圆点的时候，直接切换回第一张
if($(this).index()==0&&targetIndex==(count-1)){
ul.css('left','0px');
}
targetIndex = $(this).index();//修改目标索引为当前鼠标覆盖小圆点的索引值
//轮播图片
play();
});
});

本篇文章的内容只是我个人经验总结；分享出来，希望可以帮都大家。