jQuery圖文介紹輪播切換特效代碼

1、jquery圖文介紹輪播切換特效代碼一、實(shí)現(xiàn)功能：1、通過(guò)定時(shí)實(shí)現(xiàn)自我輪播2、當(dāng)輪播到最后一張時(shí)，會(huì)從第一張開頭繼續(xù)輪播3、點(diǎn)擊小圈圈圖標(biāo)能自動(dòng)切換到對(duì)應(yīng)4、鼠標(biāo)懸浮上停止輪播，當(dāng)鼠標(biāo)移開，會(huì)繼續(xù)輪播5、鼠標(biāo)懸浮上會(huì)顯示左右鍵圖標(biāo)，鼠標(biāo)離開，會(huì)躲藏左右鍵圖標(biāo)6、點(diǎn)擊左鍵圖標(biāo)會(huì)切換到上一張，當(dāng)切換到第一張時(shí)，再次點(diǎn)擊左鍵圖標(biāo)會(huì)切換到最后一張；點(diǎn)擊右鍵圖標(biāo)會(huì)顯示到下一張，當(dāng)切換到最后一張時(shí)，再次點(diǎn)擊右鍵圖標(biāo)會(huì)切換達(dá)到第一張。二、實(shí)現(xiàn)代碼：1、css代碼：bodymargin:0;padding:0;font:16px "微軟雅黑",sans-serif;。play-boxpos

2、ition:relative;width:500px;height:313px;margin:100px auto;border:1px solid ccc;。play-box imgwidth:500px;height:313px;border:0;。play-box adisplay:block;overflow:hidden;opacity:0;height:0;transition:opacity .5s;imglist a.currentopacity:1;height:auto;ulmargin:0;padding:0;list-style:none;ul liwidth:10px

3、;height:10px;margin:0 4px;font-size:0;border-radius:50%;background-color:fff;cursor:pointer;float:left;ul li.currentbackground-color:red;。iconlistposition:absolute;bottom:10px;left:50%;margin-left:-45px;。sliderbarposition:absolute;top:50%;margin-top:-25px;width:30px;height:50px;font-family:simsun;color:fff;text-align:center;line-height:50px;background-color:000;opacity:.6;display:none;cursor:pointer;。slidebar-leftleft:0;。slidebar-rightright:0;2、body代碼3、jquery代碼：$（document）。ready（function（