先展示效果

可點擊小點點輪播和箭頭輪播。小點點自動生成。

直接貼上代碼：

html:

css：

/*?輪播樣式?*/

.boung_des{

width:?800px;

border:?1px?solid?#eeeeee;

padding:?30px?50px?60px;

}

.bough-pics{

width:?700px;

height:?100px;

position:?relative;

white-space:nowrap;

overflow:?hidden;

}

.bough-pics>ul{

font-size:?0;

position:?absolute;

top:?0;

left:?0;

width:?10000px;

}

.bough-pics>ul>li{

float:?left;

width:?100px;

height:?100px;

border:?1px?solid?#eeeeee;

overflow:?hidden;

margin-right:?50px;

display:?inline-block;

}

.bough-pics>ul>li>img{

max-width:?100%;

max-height:?100%;

}

.bough-little{

text-align:?center;

margin-top:?20px;

}

.bough-little?span{

margin:?0?18px;

display:?inline-block;

vertical-align:?middle;

}

.bough-little?span?em{

float:?left;

margin-right:?8px;

width:?11px;

height:?11px;

border:?1px?solid?#b4b4b4;

border-radius:?50%;

cursor:?pointer;

text-indent:?9999px;

}

.bough-little?span?em>:last-child{

margin-right:?0;

}

.bough-pics>ul>li:nth-child(5n){

margin-right:?0;

}

js:

$(function?()?{

var?picLength?=?$(".bough-pics>ul>li").length;

var?index?=?0;

//?右邊

$(".bought-list>ul>li?.next").click(function?()?{

index++;

if?(index?>?picLength?/?5)?{

index?=?0;

$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

"left":?'0px'

},?500)

}

$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

'left':?-700?*?index

},?500);

circleChange();

});

//?左邊

$(".bought-list>ul>li?.prev").click(function?()?{

index--;

if?(index?

index?=?picLength?/?5;

$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

"left":?-700?*?Math.floor(index)

},?500)

}

$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

'left':?-700?*?Math.floor(index)

},?500);

circleChange();

});

//?動態生成小點點

var?picData?=?$(".bough-pics>ul>li");

var?html?=?'';

for?(var?i?=?0;?i?

var?data_suo?=?Math.ceil(i?/?5);

for?(var?i?=?0;?i?

html?+=?''?+?i?+?''

$('.bough-little?span').html(html);

}

//?小圓點點擊

$(".bough-little?span?em").each(function?(i)?{

$(this).click(function?()?{

index?=?i;

$(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

"left":?-700?*?index

},?500);

circleChange();

});

});

//?監聽小點點的變化

function?circleChange()?{

var?id_b?=?index;

if?(id_b?>?picLength?/?5)?{

id_b?=?0;

}

$(".bough-little?span?em").eq(parseInt(id_b)).addClass("dyui-bk?dyui-br").siblings("em").removeClass("dyui-bk?dyui-br");

}

circleChange();

})

總結

以上是生活随笔為你收集整理的html轮播图下面小点,jq轮播图，一组数据轮播，自动生成小点点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。