本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-1.10.2.min.js "祝辞& lt;/script>
& lt; title>图片轮播金桥(左右切换)& lt;/title>
& lt; style>
*{保证金:0;填充:0;}
ul {list-style:没有;}
.banner{宽度:600 px;高度:300 px;边界:2 px固体# ccc;保证金:100 px汽车;位置:相对;溢出:隐藏;z - index: 1;}
img{:绝对;:0;左:0;}
.des{位置:绝对;底:0;左:0;z - index: 2;背景:# ccc}
李.des{浮动:左;宽度:600 px;}
img李{浮动:左;}
.num{位置:绝对;底:10 px;宽度:100%;text-align:中心;字体大小:0;}
李.num{宽度:10 px;高度:10 px;背景:rgba(0, 0, 0, 0.5);显示:块;border - radius: 100%,显示:inline-block;保证金:0 5 px;游标:指针;}
.btn{显示:没有;}
.btn跨度{显示:块;宽度:50 px;高度:100 px;背景:rgba(0, 0, 0, 0.6);颜色:# fff;字体大小:40 px;行高:100 px; text-align:中心;游标:指针;}
.btn .prev{:绝对;左:0;:50%;margin-top: -50 px;}
.btn第二{:绝对;右:0;:50%;margin-top: -50 px;}
.num .active {background - color: # fff;}
hide{显示:没有;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=昂岱北?
& lt; ul类=癷mg”比;
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img宽度=" 600 "高度=" 300 " src=" https://www.yisu.com/zixun/img/1.jpg " alt="第1张图片”祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img宽度=" 600 "高度=" 300 " src=" https://www.yisu.com/zixun/img/1.jpg " alt="第2张图片”祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img宽度=" 600 "高度=" 300 " src=" https://www.yisu.com/zixun/img/1.jpg " alt="第3张图片”祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img宽度=" 600 "高度=" 300 " src=" https://www.yisu.com/zixun/img/1.jpg " alt="第4张图片”祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img宽度=" 600 "高度=" 300 " src=" https://www.yisu.com/zixun/img/1.jpg " alt="第5张图片”祝辞& lt;/a> & lt;/li>
& lt;/ul>
& lt; ul类=" num "祝辞& lt;/ul>
& lt; ul类="德"比;
& lt; li>第一个& lt;/li>
& lt; li>第二个& lt;/li>
& lt; li>第三个& lt;/li>
& lt; li>第四个& lt;/li>
& lt; li>第五个& lt;/li>
& lt; li>第一个& lt;/li>
& lt;/ul>
& lt; div类=癰tn”比;
& lt;跨类="上一页"祝辞& lt; & lt;/span>
& lt;跨类=跋乱桓觥痹谧４? lt;/span>
& lt;/div>
& lt;/div>
& lt; script>
$(函数(){
var=0;
var计时器=零;
(var j=0;j & lt;$('。img李”). length;j + +){//创建圆点
$ (' .num ') .append (' & lt; li> & lt;/li>”)
}
$('。李num”)当代().addClass(“活跃的”);//给第一个圆点添加样式
var firstimg=$ ('。.clone img李”)当代()();//复制第一张图片
$ (img) .append (firstimg) .width ($ ('。img李”). length * ($ ('。img img) .width ()));//第一张图片放到最后一张图片后,设置ul的宽度为图片张数*图片宽度
$ (' .des ') .width ($ (“img李”). length * ($ ('。img img) .width ()));//下一个按钮
$('第二').click(函数(){
我+ +;
如果(我==$ ('。img李”). length) {
i=1;//这里不是我=0
$ (img) . css({左:0});//保证无缝轮播,设置左值
}；
$ (img)鸡毛蒜皮().animate({左:我* 600},300);
如果(我==$ ('。img李”).length-1){//设置小圆点指示
$('。李num”) .eq (0) .addClass(“活跃的”).siblings () .removeClass(“活跃的”);
$ (' .des李').eq (0) .removeClass(隐藏的).siblings () .addClass(隐藏的);
其他}{
$('。李num”) .eq (i) .addClass(“活跃的”).siblings () .removeClass(“活跃的”);
$ (' .des李').eq (i) .removeClass(隐藏的).siblings () .addClass(隐藏的);
}
}）//上一个按钮
$ (' .prev ') .click(函数(){
我,;
如果(i==1) {
我=$ ('。img李”).length-2;
$ (img) . css({左:- ($ ('。img李”).length-1) * 600});
}
$ (img)鸡毛蒜皮().animate({左:我* 600},300);
$('。李num”) .eq (i) .addClass(“活跃的”).siblings () .removeClass(“活跃的”);
$ (' .des李').eq (i) .removeClass(隐藏的).siblings () .addClass(隐藏的);
}）//设置按钮的显示和隐藏
$ (' .banner ') .hover(函数(){
$ (' .btn '),告诉();
},函数(){
$ (' .btn ') hide ();
}）//鼠标划入圆点
$('。李num”) .mouseover(函数(){
var _index=$(这).index ();
$ (img)鸡毛蒜皮().animate({左:-_index * 600}, 150);
$('。李num”) .eq (_index) .addClass(“活跃的”).siblings () .removeClass(“活跃的”);
$ (' .des李').eq (_index) .removeClass(隐藏的).siblings () .addClass(隐藏的);
}）//定时器自动播放
计时器=setInterval(函数(){
我+ +;
如果(我==$ ('。img李”). length) {
i=1;
$ (img) . css({左:0});
}；
$ (img)鸡毛蒜皮().animate({左:我* 600},300);
如果(我==$ ('。img李”).length-1) {
$('。李num”) .eq (0) .addClass(“活跃的”).siblings () .removeClass(“活跃的”);
$ (' .des李').eq (0) .removeClass(隐藏的).siblings () .addClass(隐藏的);
其他}{
$('。李num”) .eq (i) .addClass(“活跃的”).siblings () .removeClass(“活跃的”);
$ (' .des李').eq (i) .removeClass(隐藏的).siblings () .addClass(隐藏的);
}
}, 1000)//鼠标移入,暂停自动播放,移出,开始自动播放
$ (' .banner ') .hover(函数(){
clearInterval(计时器);
},函数(){
计时器=setInterval(函数(){
我+ +;
如果(我==$ ('。img李”). length) {
i=1;
$ (img) . css({左:0});
}；
$ (img)鸡毛蒜皮().animate({左:我* 600},300);
如果(我==$ ('。img李”).length-1) {
$('。李num”) .eq (0) .addClass(“活跃的”).siblings () .removeClass(“活跃的”);
$ (' .des李').eq (0) .removeClass(隐藏的).siblings () .addClass(隐藏的);
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
