本文实例为大家分享了js实现京东轮播图效果的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
身体,ul,李{填充:0;保证金:0;}
李{list-style-type:没有;}
.wrap {
位置:相对;
宽度:480 px;
身高:260 px;
保证金:100 px的汽车;
}
李.wrap> ul>{:绝对;显示:没有;}/*隐藏所有的李*/.wrap img{宽度:480 px;高度:260 px;}
.wrap李:第一个孩子{显示:块;}/*显示第一个*/.arrow {
宽度:480 px;
高度:60 px;
位置:绝对的;
上图:50%;
margin-top: -30 px;
显示:没有;
}
.arrow>跨度{
字体大小:24分;
行高:60 px;
显示:inline-block;
宽度:36 px;
background - color: # CEE5E8;
text-align:中心;
光标:指针;
透明度:0.5;
border - radius: 5 px;/*显示圆框*/-webkit-border-radius: 5 px;
-moz-border-radius: 5 px;
颜色:黑色;
}
.wrap:悬停.arrow {
显示:块;
}
.arrow>跨度:胎{
浮:正确;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="包装"比;
& lt; !——图片部分——比;
& lt; ul>
& lt; li>
& lt; a href=" javascript:无效(0)”在
& lt; img src=" https://www.yisu.com/zixun/images/1.jpg "/比;
& lt;/a>
& lt;/li>
& lt; li>
& lt; a href=" javascript:无效(0)”在
& lt; img src=" https://www.yisu.com/zixun/images/2.jpg "/比;
& lt;/a>
& lt;/li>
& lt; li>
& lt; a href=" javascript:无效(0)”在
& lt; img src=" https://www.yisu.com/zixun/images/3.jpg "/比;
& lt;/a>
& lt;/li>
& lt; li>
& lt; a href=" javascript:无效(0)”在
& lt; img src=" https://www.yisu.com/zixun/images/4.jpg "/比;
& lt;/a>
& lt;/li>
& lt;/ul>
& lt; !——按钮部分——比;
& lt; div类=凹贰北?
& lt; span> & lt; & lt;/span>
& lt; span>祝辞& lt;/span>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.12.0.min.js "祝辞& lt;/script>
& lt; script>
$(函数(){
var计算=0;
函数改变(){
数+ +;
如果(count==$ (“.wrap> ul>李”). length) {
数=0;
}
$ (“.wrap> ul>李”).eq(计数).fadeIn () .siblings(李).fadeOut ();
}
var定时器=setInterval(变化,4000);
函数运行(){
定时器=setInterval(变化,4000);
}/*注意jquery中setInterval函数不要加引号和(),否则会报缺少对象*/$ (" .arrow>跨度”).eq (0) .click(函数(){
clearInterval(定时器);/*清除计时器,目的在于不会因点击按钮时setInterval事件仍旧执行*/数,
如果(count==1) {
数=$ (“.wrap> ul>李”)。长度- 1;
}$ (“.wrap> ul>李”).eq(计数).fadeIn () .siblings(李).fadeOut ();
setTimeout(重新运行,0);/*重新启动计时器,保证不点击按钮是能正常切换*/});
$ (" .arrow>跨度”).eq (1) .click(函数(){
clearInterval(定时器);
数+ +;
如果(count==$ (“.wrap> ul>李”). length) {
数=0;
}$ (“.wrap> ul>李”).eq(计数).fadeIn () .siblings(李).fadeOut ();
setTimeout(重新运行,0);
});
});
& lt;/script>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
