html5简单的轮播图代码生成器,jquery实现的简单轮播图功能【适合新手】

本文实例讲述了jquery实现的轮播图功能。分享给大家供大家参考，具体如下：

前面介绍了原生js实现的轮播图，今天就试着用jquery做了个轮播图，方法都一样，但jquery实现却比js方便了许多

www.jb51.net jQuery轮播图

*{

margin: 0px;

padding: 0px;

list-style: none;

}

#flash{

width: 400px;

height: 200px;

position: relative;

margin: 0 auto;

border:1px solid black;

overflow: hidden;

}

#falsh img{

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

}

#flash ul{

position: absolute;

left: 25%;

bottom: 5%;

width: 200px;

height: 30px;

border-radius: 20px;

background-color: rgba(0,0,0,0.5);

}

#flash ul li{

float: left;

width: 15px;

height: 15px;

border-radius: 50%;

background-color: #fff;

margin-left: 20px;

margin-top: 7px;

}

#flash ul .li_first{

background-color: #f40;

}

#flash .button{

width: 50px;

height: 50px;

border-radius: 50%;

background-color: rgba(0,0,0,0.3);

cursor: pointer;

}

#flash .right{

position: absolute;

right: 10px;

top: 80px;

}

#flash .left{

position: absolute;

left: 10px;

top: 80px;

}

#flash .button span{

font-size: xx-large;

font-weight: 700;

line-height: 50px;

margin-left: 15px;

color: rgba(255,255,255,0.5);

}

>

<

var count = 0 ; //定义全局变量count来表示当前图片

function run(){

count++;

count = count ==5?0:count;

$('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300); //利用eq来遍历img，并将count位图片显示，其他兄弟元素隐藏，fadeIN位淡入显示，fadeOut为淡出

$('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff'); //同样利用遍历改变圆点的背景色

}

function reverserun(){

count--;

count = count == -1?4:count;

$('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300);

$('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff');

}

var timer = setInterval(run,1000); //设置定时器

$('#flash').hover(function(){ //设置鼠标移入移出事件

clearInterval(timer);

},function(){

timer = setInterval(run,1000);

})

$('#flash ul li').mouseenter(function(){ //设置移入圆点事件

count = $(this).index();

count = count ==5?0:count;

$('#flash img').eq(count).fadeIn(300).siblings('img').fadeOut(300);

$('#flash ul li').eq(count).css('background','#f40').siblings('li').css('background','#fff');

})

$('#flash .right').click(function(){ //设置右键按钮点击事件

run();

})

$('#flash .left').click(function(){ //设置左键按钮点击事件

reverserun();

})

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试一下运行效果。

希望本文所述对大家jQuery程序设计有所帮助。