最简单的JavaScript图片轮播代码(两种方法)

更新时间：2021年03月30日 11:53:27 作者：super_walker

基于javascript代码实现最简单的图片轮播效果，非常简单，本文通过两种方式给大家介绍最简单的图片轮播，感兴趣的朋友一起学习吧

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-">
 <title>最简单的轮播广告</title>
 <style>
 body, div, ul, li {
 margin: ;
 padding: ;
 }
 ul {
 list-style-type: none;
 }
 body {
 background: #;
 text-align: center;
 font: px/px Arial;
 }
 #box {
 position: relative;
 width: px;
 height: px;
 background: #fff;
 border-radius: px;
 border: px solid #fff;
 margin: px auto;
 }
 #box .list {
 position: relative;
 width: px;
 height: px;
 overflow: hidden;
 border: px solid #ccc;
 }
 #box .list li {
 position: absolute;
 top: ;
 left: ;
 width: px;
 height: px;
 opacity: ;
 transition: opacity .s linear
 }
 #box .list li.current {
 opacity: ;
 }
 #box .count {
 position: absolute;
 right: ;
 bottom: px;
 }
 #box .count li {
 color: #fff;
 float: left;
 width: px;
 height: px;
 cursor: pointer;
 margin-right: px;
 overflow: hidden;
 background: #F;
 opacity: .;
 border-radius: px;
 }
 #box .count li.current {
 color: #fff;
 opacity: .;
 font-weight: ;
 background: #f
 }
 </style>
 </head>
 <body>
 <div id="box">
 <ul class="list">
 <li class="current" style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 </ul>
 <ul class="count">
 <li class="current"></li>
 <li class=""></li>
 <li class=""></li>
 <li class=""></li>
 <li class=""></li>
 </ul>
 </div>
 <script>
 var box=document.getElementById('box');
 var uls=document.getElementsByTagName('ul');
 var imgs=uls[].getElementsByTagName('li');
 var btn=uls[].getElementsByTagName('li');
 var i=index=; //中间量，统一声明；
 var play=null;
 console.log(box,uls,imgs,btn);//获取正确
 //图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面
 function show(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应
 for(i=;i<btn.length;i++ ){
 btn[i].className=''; //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
 btn[a].className='current';
 }
 for(i=;i<imgs.length;i++){ //把图片的效果设置和按钮相同
 imgs[i].style.opacity=;
 imgs[a].style.opacity=;
 }
 }
 //切换按钮功能，响应对应图片
 for(i=;i<btn.length;i++){
 btn[i].index=i; //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
 btn[i].onmouseover=function(){
 show(this.index);
 clearInterval(play); //这就是最后那句话追加的功能
 }
 }
 //自动轮播方法
 function autoPlay(){
 play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
 index++;
 index>=imgs.length&&(index=);//可能有优先级问题，所以用了括号，没时间测试了。
 show(index);
 },)
 }
 autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了
 //div的鼠标移入移出事件
 box.onmouseover=function(){
 clearInterval(play);
 };
 box.onmouseout=function(){
 autoPlay();
 };
 //按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
 </script>
 </body>
 </html>

代码二：

首先第一步，下载好一个jquery库的插件，jquery.js 网上很多随处可以下载．下载的插件要放在目录下．然后在html文档中链接好<script type="text/javascript" src="jQuery.js"></script>

第二步，布局好一个DIV,如：

<div id="scroll">
 <p class="subl">上一张<p/>
 <p class="subr">下一张<p/>
 <ul>
 <li style="background:red;display:block;"></li>
　//上面的ｌｉ要设定为显示，因为是第一张图片．
 <li style="background:green;"></li>
 <li style="background:gray;"></li>
 <li style="background:orange;"></li>
 </ul>
 </div>

由于方便各位网友下载能够清晰明了，我就没有用图片路径了，因为到你们电脑上就看不到了，这里用背景颜色．

第三步，就到了写CSS的时候了．下面的CSS懂基础的人都看得懂．

#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的ＤＩＶ设定属性．
#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ属性．
#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：display:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来．
 .subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性．注意一个绝对定位．
 .subr{
position:absolute;
bottom:20px; right:40%;
width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; 
}//下一张按钮的属性．注意一个绝对定位．
.subr:hover{ background:yellow;border-radius:10px;}
.subl:hover{ background:yellow;border-radius:10px;}
//以上两个hover是鼠标经过的效果．

第四步，就是ｊｑｕｅｒｙ代码了！也很简单．先将代码看一遍，你就会用了！

<script type="text/javascript">
/*轮播*/
 $(function(){
 var i=0;
 var len=$("#scroll ul li").length-1;
 $(".subl").click(function(){
 if(i==len){
i=-1;
}
i++;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
//到这里分开！上面的是上一张点击的效果代码，下面的是下一张点击的效果代码．
 $(".subr").click(function(){//获取类名的点击事件．
 if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
 });
 /*轮播*/
</script>

四步轻松搞定一个简单的轮！

到此这篇关于最简单的JavaScript图片轮播代码(两种方法)的文章就介绍到这了,更多相关最简单的图片轮播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript 闭包的使用场景
这篇文章主要介绍了JavaScript 闭包的使用场景，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-09-09
js+CSS简单实现瀑布流布局
瀑布流布局,是一种视觉表现为参差不齐的多栏布局,常用于内容以图片为主的页面展示,本文将使用css和js两种方式来实现瀑布流布局,需要的可以参考下
2023-11-11
JavaScript实现移动端短信验证码流程介绍
这篇文章主要为大家详细介绍了javascript实现移动端发送短信验证码案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-10-10
用最少的JS代码写出贪吃蛇游戏
本篇文章给大家分享了用嘴简单的JS代码来实现经典贪吃蛇游戏的全部内容，有兴趣的朋友参考学习下。
2018-01-01
IOS中safari下的select下拉菜单文字过长不换行的解决方法
今天在项目开发中遇到一个问题safari下的select下拉菜单文字过长不换行问题，最终我用<optgroup>标签解决此问题，下面小编把实现思路分享给大家供大家参考
2016-09-09
js实现城市级联菜单的2种方法
这篇文章主要为大家详细介绍了js实现城市级联菜单的2种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
JS对象序列化成json数据和json数据转化为JS对象的代码
这篇文章主要介绍了JS对象序列化成json数据和json数据转化为JS对象的代码,需要的朋友可以参考下
2017-08-08
Immutable 在 JavaScript 中的应用
在 JavaScript 中，对象是引用类型的数据，其优点在于频繁的修改对象时都是在原对象的基础上修改，并不需要重新创建，这样可以有效的利用内存，不会造成内存空间的浪费，对象的这种特性可以称之为 Mutable，中文的字面意思是「可变」
2016-05-05
深入理解 TypeScript Reflect Metadata
这篇文章主要介绍了深入理解 TypeScript Reflect Metadata，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
JS实现右侧悬浮框效果
这篇文章主要为大家详细介绍了JS实现右侧悬浮框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03