一.要实现的效果
1.点击左右可切换图片
2.点击小圆点 可切换图片
二.效果图
三.代码
1.css
<style type="text/css"> body,img,span,ul,li{margin: 0;padding: 0;} #div1{width: 600px;height: 350px;margin: 150px auto;border: 10px solid #eee;position: relative;} img{width: 600px;height: 350px;} span{display: inline-block;position: absolute;width: 50px;height: 50px;border-radius: 25px;background:rgba(0,0,0,.3); font-size: 30px;line-height: 50px;text-align: center;cursor: pointer;color: white;} span:hover{background:rgba(255,255,255,.5);color:black;transform:scale(1.3);} span#l{left: 10px;top: 150px;} span#r{right: 10px;top: 150px;} #div1 #ul{position: absolute;bottom: 10px;left: 250px;width: 125px;height: 20px;} #div1 #ul li{list-style: none;float: left;height: 20px;width: 20px;border-radius: 10px;background:rgba(255,255,255,.5); margin-right: 5px;cursor: pointer;} #div1 #ul .active{background:rgba(0,0,0,.5);} </style>
2.html
<body> <div id="div1"> <img src="" alt=""> <span id="l"><</span> <span id="r">></span> <ul id="ul"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body>
3.js
<script type="text/javascript"> window.onload=function(){ var div1=document.getelementbyid('div1'); var oimg=div1.getelementsbytagname('img')[0]; var spanl=document.getelementbyid('l'); var spanr=document.getelementbyid('r'); var oul=document.getelementbyid('ul'); var oli=oul.getelementsbytagname('li'); var arrimg=['img2/1.jpg','img2/2.jpg','img2/3.jpg','img2/4.jpg','img2/5.jpg']; var num=0; var oldli=0; function fn(num) { oimg.src=arrimg[num]; } fn(0); function fnli(num){ oli[oldli].classname=''; oli[num].classname='active'; oldli=num; } fnli(0); /*点击左右span图片切换*/ /*点击左右span时li切换*/ spanl.onclick=function(){ if (num<1) { num=arrimg.length-1; fn(num); fnli(num); }else{ num--; fnli(num); fn(num); } } spanr.onclick=function(){ if (num==arrimg.length-1) { num=0; fn(num); fnli(num); }else{ num++; fnli(num); fn(num); } } /*点击li实现图片切换*/ for (var i = 0; i < oli.length; i++) { oli[i].index=i; oli[i].onclick=function(){ fn(this.index); fnli(this.index); } } } </script>
总结
以上所述是小编给大家介绍的js 实现banner图片轮播效果(鼠标事件),希望对大家有所帮助
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论