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

忘是亡心i 2022-10-06 11:48 128阅读 0赞

本文实例讲述了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);

![cdcb781cd5dacef3ddd2265f0a19ae3d.png][]

![f1ffe86b2db5a552f0d028340ac2fd85.png][]

![70a19c2d662665a459712fbb49e0a214.png][]

![70754c810a640f06a94568126d2a2a38.png][]

![defb415df8a84fb2a192ae291c6ea516.png][]

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程序设计有所帮助。

[cdcb781cd5dacef3ddd2265f0a19ae3d.png]: /images/20221005/07da5d42522644d3a31c8c4f7e5da406.png
[f1ffe86b2db5a552f0d028340ac2fd85.png]: /images/20221005/916e0aeeae3343549455efac6c6b64ea.png
[70a19c2d662665a459712fbb49e0a214.png]: /images/20221005/10f9483324c6405facf677ec763e3c77.png
[70754c810a640f06a94568126d2a2a38.png]: /images/20221005/2c0bcc41261d4e0e9e585602ebf89a48.png
[defb415df8a84fb2a192ae291c6ea516.png]: /images/20221005/417017f7e5364c6d99cde9bc663959c7.png