1,本文使用js + jQuery实现轮播图,需要引用jQuery包,另种实现分别是动画实现自适应的轮播,以及变换平滑轮播(在注释代码中)。
2代码中的图片大家自己更换就可以了,样式和逻辑均写在js里。
3, html标签代码,js代码
& lt; div类=盎椤北?//轮播箭头
& lt; p class=" lastpic”祝辞& lt; img src=" https://www.yisu.com/images/prev.png "祝辞& lt;/p>
& lt; p class=" nextpic”祝辞& lt; img src=" https://www.yisu.com/images/next.png "祝辞& lt;/p>//轮播图片
& lt; ul类id=盎玫破?盎玫破琧learfix”比;
& lt; li> & lt; img类=跋煊Α眘rc=" https://www.yisu.com/images/wrap-page.jpg " alt="暂无图片”祝辞& lt;/li>
& lt; li> & lt; img类=跋煊Α眘rc=" https://www.yisu.com/images/wrap-page.jpg " alt="暂无图片”祝辞& lt;/li>
& lt; li> & lt; img类=跋煊Α眘rc=" https://www.yisu.com/images/wrap-page.jpg " alt="暂无图片”祝辞& lt;/li>
& lt; li> & lt; img类=跋煊Α眘rc=" https://www.yisu.com/images/wrap-page.jpg " alt="暂无图片”祝辞& lt;/li>
& lt;/ul>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
$(文档)时函数(){
var len=$ ("。滑块李”).length-1;//给滑块设置样式
$ (" .slider ") . css ({
“宽度”:“100%”,
“高度”:“继承”,
“溢出”:“隐藏”,
“显示”:“inline-block”
}）;//给ul设置宽度
$ (" .slides ") . css ({
“位置”:“相对”,
“宽度”:((len + 1) * 100) .toString () +“%”,
“保证金”:“0”,
“填充”:" 0 "});//给李设置百分比宽度
$("。幻灯片李”). css ({
“宽度”:(100/(len + 1)) .toString () +“%”,
“浮动”:“左”
}）;//给图片设置宽度
$ (" .responsive ") . css ({
“宽度”:“100%”,
“高度”:“继承”
}）;//控制点样式
$("。滑块p ") . css ({
“位置”:“绝对”,
“z - index”:“999”,
“光标”:“指针”
}）;
$("。滑块.lastpic”) . css ({
“左”:“0”,
“margin-top”:“7%”
}）;
$("。滑块.nextpic”) . css ({
“正确的”:“0”,
“margin-top”:“7%”
}）;//动画移动
var=0;
$ (" .nextpic ") .click(函数(){
moveNext(我);
}）;
$ (" .lastpic ") .click(函数(){
moveLast(我);
}）;//自动轮播
var计时器=setInterval(函数(){
moveNext(我);
},5000);
moveNext=function (n) {
如果(n==len) {
i=1;
$("。滑块.slides”)。动画({右:"},800);
其他}{
$("。滑块.slides”) .animate({右:((n + 1) * 100) .toString () +“%”}, 800);
}
我+ +;
}
moveLast=function (n) {
如果(n==0) {
我=len + 1;
$("。滑块.slides”) .animate({右:(len * 100) .toString () +“%”}, 800);
其他}{
$("。滑块.slides”) .animate({右:((n - 1) * 100) .toString () +“%”}, 800);
}
我,;
}//手机触摸效果
var startX, endX moveX;
函数touchStart(事件){
var=联系event.touches [0];
startX=touch.pageX;
}
函数touchMove(事件){
var=联系event.touches [0];
endX=touch.pageX;
}
函数touchEnd(事件){
moveX=startX - endX;
如果(moveX> 50) {
moveNext(我);
}else if (moveX<-50) {
moveLast(我);
}
}
. getelementbyid(“幻灯片”).addEventListener (“touchstart touchstart”,假);
. getelementbyid(“幻灯片”).addEventListener (“touchmove touchmove”,假);
. getelementbyid(“幻灯片”).addEventListener (“touchend touchend”,假);//转换移动固定宽度,无法自适应//$ (“.nextpic”) .click(函数(){//如果我==len () {//i=1;//$ ("。滑块.slides”) . css ({//皌ransition-timing-function”:“线性”,//皌ransition-duration”:“800 ms”,//氨浠弧?“translateX (0 px) '//})//其他}{//$ ("。滑块.slides”) . css ({//皌ransition-timing-function”:“线性”,//皌ransition-duration”:“800 ms”,//氨浠弧?“translateX (- ' + +”(i + 1) *宽度px)”//})//}//我+ +;//});//$ (“.lastpic”) .click(函数(){//如果(i==0) {//我=len + 1;//$ ("。滑块.slides”) . css ({//皌ransition-timing-function”:“线性”,//皌ransition-duration”:“800 ms”,//氨浠弧?“translateX (- ' + len *宽度+ ' px)”//})//其他}{//$ ("。滑块.slides”) . css ({//皌ransition-timing-function”:“线性”,//皌ransition-duration”:“800 ms”,//氨浠弧?“translateX(- +(张)*宽度+的px)”//})//}//我——;//})
}）;
& lt;/script>
