html图片轮播(html实现轮播图效果)

整体代码如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}#box {width: 100%;height: 502px;overflow: hidden;/*溢出的部分:隐藏*/}#box .menu {width: 607%;position: relative;margin-left: -40px;/*左外边距*/bottom: 0px;/*低边距离*/}#box .menu ul li {float: left;/*浮动:左,就是要把图片往左浮动*/list-style: none;}</style></head><body><div id="box"><div class="menu"><ul><li><img src="image/01.jpg" width="1546px;" height="500px"></li><li><img src="image/02.jpg" width="1546px;" height="500px"></li> <li><img src="image/03.jpg" width="1546px;" height="500px"></li> <li><img src="image/04.jpg" width="1546px;" height="500px"></li> <li><img src="image/05.jpg" width="1546px;" height="500px"></li> <li><img src="image/06.jpg" width="1546px;" height="500px"></li></ul></div></div><script src="jquery-3.4.1.min.js" type="text/javascript"></script> <script>// function就是函数执行 $(function(){ //一般获取元素用var,从第一张图片开始 var _index=0, // 窗口宽度,就是把所有图片放在水平线上的总宽度 window_width=1546, //时间循环 timer=null, //图片内容一共六张 images_count=6; //获取下一个 function nextPlay(){ if(_index>images_count-1){//_index指的是每一张图片 _index=0;//从第一张开始 //stop() 停留，animate自定义动画往左运动， $("#box .menu").stop().animate({left:-window_width*_index},500); }else{ $("#box .menu").stop().animate({left:-window_width*_index},500); } //每一个图片加一就是自动按顺序出来 _index++; } timer=setInterval(nextPlay,2000); }) </script></body></html>

javascript文件也就是js文件：链接：https://pan.baidu.com/s/1_RUihF6SdA4-NJcqHGqm1g & lt！DOCTYPE html & gt& lthtml & gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& lttitle & gt& lt/title & gt；& ltstyle & gt* {边距:0；填充:0；} # box {宽度:100%；身高:502px溢出:隐藏；/*溢出部分:隐藏*/} #框。菜单{宽度:607%；位置:相对；左边距:-40px；/*左外边距*/bottom:0px；/*低端距离*/} #框。菜单ul Li { float:left；/* floating: left，即将图片向左浮动*/list-style:none；} & lt/style & gt；& lt/head & gt；& ltbody & gt& ltdiv id = & # 34方框& # 34；& gt& lt！-最外面的大盒子->:& lt；div class = & # 34菜单& # 34；& gt& lt！-这是我们要播放的图片-& gt；& ltul & gt& lt！-无序列表-->:& lt；李& gt& ltimg src = & # 34image/01 . jpg & # 34；宽度= & # 34；1546px"高度= & # 34；500像素& # 34；& gt& lt/李& gt& lt李& gt& ltimg src = & # 34image/02 . jpg & # 34；宽度= & # 34；1546px"高度= & # 34；500像素& # 34；& gt& lt/李& gt& lt李& gt& ltimg src = & # 34image/03 . jpg & # 34；宽度= & # 34；1546px"高度= & # 34；500像素& # 34；& gt& lt/李& gt& lt李& gt& ltimg src = & # 34image/04 . jpg & # 34；宽度= & # 34；1546px"高度= & # 34；500像素& # 34；& gt& lt/李& gt& lt李& gt& ltimg src = & # 34image/05 . jpg & # 34；宽度= & # 34；1546px"高度= & # 34；500像素& # 34；& gt& lt/李& gt& lt李& gt& ltimg src = & # 34image/06 . jpg & # 34；宽度= & # 34；1546px"高度= & # 34；500像素& # 34；& gt& lt/李& gt& lt/ul & gt；& lt/div & gt；& lt/div & gt；& lt！-在这里导入javascript文件，也就是js代码。没有这个，就没有动画-& gt；& lt脚本src = & # 34jquery-3 . 4 . 1 . min . js & # 34；type = & # 34文本/JavaScript & # 34；& gt& lt/script & gt；& lt！-写代码->:& lt；脚本& gt// function是函数执行$(function(){ //一般用var获取元素。从第一张图开始，var _index=0，//窗口宽度是横线上所有图片的总宽度，window_width=1546，//时间周期timer=null，//总共有六张图片_ count = 6；//获取下一个函数next play(){ if(_ index >；Images_count-1){//_index指每张图片_ index = 0；//从第一张图片开始//stop()停留。动画自定义动画向左移动，$(& # 34；#方框。菜单& # 34；).停止()。animate({ left:-window _ width * _ index }，500)；} else { $(& # 34；#方框。菜单& # 34；).停止()。animate({ left:-window _ width * _ index }，500)；}//每张图片加一自动出来order _ index++；} timer=setInterval(nextPlay，2000)；})& lt；/script & gt；& lt/body & gt；& lt/html & gt；Javascript文件是js文件:链接:https://pan.baidu.com/s/1_RUihF6SdA4-NJcqHGqm1g

提货代码:mnfg

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。

作者：美站资讯，如若转载，请注明出处：https://www.meizw.com/n/97843.html

html图片轮播(html实现轮播图效果)

相关推荐

发表回复