图片轮播，左右滑动

HTML:

<

>

1

2

3

4

5

CSS:---------------------------------------------------------------------------------------------------------------

#igs {

position: relative;

width: 100%;

height: 416px;

}

.ig {

position: absolute;

width: 100%;

height: 26em;

}

#tabs {

position: absolute;

list-style: none;

left:47.5%;

margin 0 auto;

bottom: 10px;

border-radius: 10px;

background-color: transparent;

}

.tab{

float: left;

text-align: center;

line-height: 20px;

width: 10px;

height: 10px;

cursor: pointer;

overflow: hidden;

margin-right: 20px;

border-radius: 100%;

background-color: gray;

color: gray;

}

.tab:hover{

float: left;

text-align: center;

line-height: 20px;

width: 10px;

height: 10px;

cursor: pointer;

overflow: hidden;

margin-right: 20px;

border-radius: 100%;

background-color: black;

color: black;

}

.btn{

position: absolute;

color: #fff;

top: 4em;

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(){

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; }

* */

}