本文实例为大家分享了js实现简单轮播图效果的具体代码,可以实现左右翻转,图片切换显示等效果,供大家参考,具体内容如下
效果展示:
代码展示:
& lt; !doctype html>
& lt; html>
& lt; !
学习功能:使用JavaScript实现图片轮播,左右翻转,图片切换显示等。
作者:丽莎于2018-5-30
——比;
& lt; title>
& lt;元charset=皍tf - 8”比;
& lt;/title>
& lt; body>
& lt; div类=癿aindiv”比;
& lt; style>
* {
保证金:0 px;
填充:0 px;
}
.shidian {
宽度:600 px;
身高:300 px;
位置:相对;
}
.shidian> # shidian_img {
宽度:100%;
高度:100%;
}
李.shidian> # shidian_img {
宽度:100%;
高度:100%;
位置:绝对的;
左:0 px;
上图:0 px;
}
.shidian> # shidian_img img {
宽度:100%;
高度:100%;
}
李.shidian> # shidian_nav {
浮:左;
宽度:20 px;
高度:20 px;
背景:# ffffff;
边界:1 px # ffff00固体;
margin-left: 10 px;
text-align:中心;
行高:20 px;
list-style:没有;
}
.shidian> # shidian_nav {
位置:绝对的;
右:10 px;
底部:10 px;
}
.shidian> # shidian_nav .active {
背景:0000 ff;
颜色:黑色;
光标:指针;
}
.shidian .img_nav {
位置:绝对的;
前:140像素;
宽度:100%
}
.shidian .img_nav .left {
光标:指针;
}
.shidian .img_nav铃声{
光标:指针;
浮:正确;
}
& lt;/style>
& lt; div类=皊hidian”比;
& lt; ul id=皊hidian_img”比;
& lt; li> & lt; img src=" https://www.yisu.com/zixun/image/1.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/image/3.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/image/2.jpg "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/image/4.jpg "/祝辞& lt;/li>
& lt;/ul>
& lt; ul id=皊hidian_nav”比;
& lt;李类=盎钤尽钡脑? & lt;/li>
& lt;李类=盎钤尽钡脑? & lt;/li>
& lt;李类="活跃"在3 & lt;/li>
& lt;李类=盎钤尽钡脑? & lt;/li>
& lt;/ul>
& lt; div类=癷mg_nav”比;
& lt;跨类=白蟆北?& lt; & lt; & lt;/span>
& lt;跨类=罢贰钡淖４亲４亲４? lt;/span>
& lt;/div>
& lt;/div>
& lt; script>
指数=0;
一个=. getelementbyid (“shidian_img”)定格;//获得图片节点
资产净值=. getelementbyid (“shidian_nav”)定格;//获得右下图片导航的节点//下一张轮播图片
函数next_img () {
指数+ +;
如果(指数在=imgs.length) {
指数=0;
}
show_log ();
}//正常显示图片
函数show_log () {
(我=0;我& lt;imgs.length;我+ +){
一个[我].style。显示=懊挥小?
一个[我]。className=" ";
}//console.log(索引)
如果(指数在=imgs.length) {
指数=0;
}
一个指数.style。显示=翱椤?
一个(指数)。className=盎钤尽?
}
show_log ();
计时器=setInterval (next_img, 1000);
函数stop_img () {
clearInterval(计时器);
}
函数start_img () {
计时器=setInterval (next_img, 1000);
}//随机切换显示图片
函数show_img1 (obj) {
stop_img ();
指数=getIndex (obj。parentNode obj);
show_log ();
}//向左翻图片
函数left_img () {
stop_img ();
指数——;
如果(指数& lt;0)=一个索引。长度- 1;
show_log ();
start_img ();
}//向右翻图片
函数right_img () {
stop_img ();
指数+ +;
如果(指数比;imgs.length)指数=0;
show_log ();
start_img ();
}//获得当前的节点
函数getIndex(母公司obj) {//console.log (obj.innerHTML);
e=parent.children;
(我=0;我& lt;e.length;我+ +){
如果(e[我]==obj) {
返回我;
}
}
}
& lt;/script>
& lt;/div>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
