Ps：
功能比较简单。整个盒子不能根据图片大小自动调节。这里使用的图片是1170×500。如果你想改变到另一个图片大小，修改图片的宽度under.pic-list。
为旗帜的整个宽度the.pic-list宽度，如果需要传送大量图片的数量，对the.pic-list宽度应大于单张*宽数，
HTML
>
CSS
旗帜{。
宽度：100%；
身高：500px；
溢出：隐藏；
职位：相对；
}
横幅横幅
文字装饰：无；
}
横幅图片列表{
宽度：10000px；
身高：500px；
位置：绝对；
Z指数：1；
}
banner.pic-list img {。
宽度：1170px；
浮点数：左；
}
#按钮{
位置：绝对；
Z指数：2；
身高：10px；
底部：20px；
左：550px；
}
#按钮跨度{
光标：指针；
浮点数：左；
边境：1px solid # FFF；
宽度：10px；
身高：10px；
边框半径：50%；
背景：# 333；
右边距：5px；
}
#按钮。在{
背景：橙色；
}
箭{。
光标：指针；
行高：36px；
文本对齐：中心；
字体大小：20px；
字体粗细：粗体；
宽度：40px；
身高：40px；
位置：绝对；
Z指数：2；
上图：200px；
背景：RGBA（0,0,0,0.5）；
颜色：# FFF；
显示：无；
}
横幅：悬停。箭头{显示：块；}
#沪指{
左：20px；
}
#下{
右：20px；
}
js
$（文档）Ready（函数（）{）
变量PicNum = 4； / /图片的数量，根据实际的变化
VaR个= 1170； / /图像宽度，根据实际的变化
无功picmaxwidth = 1×PicNum *个；
无功currentpic = 1；
VaR下=美元（' #下）；
VaR的进程（#美元沪指）；
var标志= false；
Prev.on（听到咔哒声，函数（）{（）{
如果（！旗）{
（1170）calpx；
currentpic --；
如果（currentpic＜1）{
currentpic = PicNum；
}
$（#按钮跨度）。Eq（currentpic-1）。AddClass（开），兄弟姐妹（）RemoveClass（开）；
}
}）；
Next.on（听到咔哒声，函数（）{（）{
如果（！旗）{
CalPx（1170）；
currentpic + +；
如果（currentpic > PicNum）{
currentpic = 1；
}
$（#按钮跨度）。Eq（currentpic-1）。AddClass（开），兄弟姐妹（）RemoveClass（开）；
}
}）；
$（'。旗帜），（'mouseover功能（））{
停止（）；
}），（'mouseout，函数（）{（）{
游戏（）；
}）
功能nextclick（）{
Next.click（）；
}
函数播放（）{
setint = setInterval（nextclick，2000）；
}
函数停止（）{
ClearInterval（setint）；
}
功能calpx（leftpx）{
标志=真；
VaR左= parseInt（$（'。图片列表），Css（右））；
无功newleft =左+ leftpx；
var时间= 300；
var间隔= 10；
速度= leftpx /（时间/间隔）；
函数（）{
VaR左= parseInt（$（'。图片列表），Css（右））；
如果（（速度newleft）| |（速度离开<< newleft > 0））{
$（'。PIC清单）。Css（右，（（左+速度）+ 'px）；
setTimeout（，间隔）；
其他{ }
标志=假；
如果（newleft > 1170）{
newleft = picmaxwidth；
} else if（newleft < picmaxwidth）{
newleft = - 1170；
}
$（'。PIC清单）。Css（右，newleft + 'px）；
}
}
（）；
}
游戏（）；
}）；
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。
