使用jquery實現輪播圖效果

第使用jquery實現輪播圖效果今天給大家分享的是利用jquery實現輪播圖的效果，廢話不多說咯，直接上代碼，當然每行代碼會有注釋了，這樣也便于理解哦。

第一步：先引進jquery文件

scriptsrc=./jquery.js/script

第二步：html樣式

divid=banner

!--圖片--

ulid=banner_img

imgsrc=./img/1.jpgalt=

/li

imgsrc=./img/2.jpgalt=

/li

imgsrc=./img/3.jpgalt=

/li

imgsrc=./img/4.jpgalt=

/li

/ul

!--圓點--

ulid=banner_yuandian

li>

第三步：css樣式

style

margin:0;

padding:0;

list-style:none;

#banner{

position:relative;

/*圖片樣式*/

#banner#banner_img{

width:300px;

height:300px;

border:2pxredsolid;

#banner#banner_imgimg{

width:300px;

height:300px;

#banner#banner_imgli{

display:none;

#banner#banner_img:first-child{

display:block;

/*圓點樣式*/

#banner_yuandian{

position:absolute;

bottom:10px;

display:flex;

margin-left:35px;

#banner_yuandianli{

margin-left:30px;

width:20px;

height:20px;

border:1pxredsolid;

border-radius:50%;

text-align:center;

#banner_yuandianli:hover{

background:orange;

#banner_yuandian.active{

background:orange;

/*箭頭樣式*/

#banner_back{

width:30px;

height:30px;

position:absolute;

margin-top:-150px;

#banner_next{

width:30px;

height:30px;

position:absolute;

margin-top:-150px;

margin-left:273px;

/style

第四步：js樣式

script

//設置圖片，圓點，箭頭共同的下標從0開始

varindex=0;

//封裝輪播的函數第一步

functionshow(){

//下標每次+1增加

index+=1;

//如果下標大于等于圖片的長度數，返回第一張圖，即是下標index=0就行

if(index=$(#banner_imgli).length){

index=0;

//讓li的每張圖片點擊時顯示自己，其他兄弟隱藏

$(#banner_imgli).eq(index).show(1000).siblings().hide(1000);

//圓點的下標也需要封裝一下樣式

$(#banner_yuandianli).eq(index).addClass(active).siblings().removeClass(active

//利用計時器達到輪播效果第二步

varx=setInterval(show,2000);

//鼠標移動到圖片上時清除計時器，移出之后重新加入計時器

$(#b