使用原生的javascript来实现轮播图
下面看下js轮播图的实现代码，具体代码如下所示：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
*{
padding:0;
margin:0;
list-style:none;
border:0;
}
.all{
width:500px;
height:200px;
padding:7px;
border:1pxsolid#ccc;
margin:100pxauto;
position:relative;
}
.screen{
width:500px;
height:200px;
overflow:hidden;
position:relative;
}
.screenli{
width:500px;
height:200px;
overflow:hidden;
float:left;
}
.screenul{
position:absolute;
left:0;
top:0px;
width:3000px;
}
.allol{
position:absolute;
right:10px;
bottom:10px;
line-height:20px;
text-align:center;
}
.allolli{
float:left;
width:20px;
height:20px;
background:#fff;
border:1pxsolid#ccc;
margin-left:10px;
cursor:pointer;
}
.allolli.current{
background:yellow;
}
#arr{
display:none;
}
#arrspan{
width:40px;
height:40px;
position:absolute;
left:5px;
top:50%;
margin-top:-20px;
background:#000;
cursor:pointer;
line-height:40px;
text-align:center;
font-weight:bold;
font-family:'黑体';
font-size:30px;
color:#fff;
opacity:0.3;
border:1pxsolid#fff;
}
#arr#right{
right:5px;
left:auto;
}
</style>
</head>
<body>
<divclass="all"id='box'>
<divclass="screen">
<ul>
<li><imgsrc="images/1.jpg"width="500"height="200"/></li>
<li><imgsrc="images/2.jpg"width="500"height="200"/></li>
<li><imgsrc="images/3.jpg"width="500"height="200"/></li>
<li><imgsrc="images/4.jpg"width="500"height="200"/></li>
<li><imgsrc="images/5.jpg"width="500"height="200"/></li>
</ul>
<ol>
</ol>
</div>
<divid="arr"><spanid="left"><</span><spanid="right">></span></div>
</div>
<script>
function$(element){
returndocument.getElementById(element);
}
varbox=$("box");
varscreen=box.children[0];
varul=screen.children[0];
varulLis=ul.children;
varol=screen.children[1];
vararr=$("arr");
varleft=$("left");
varright=$("right");
//动态创建小图标
for(vari=0;i<ulLis.length;i++){
varli=document.createElement("li");
li.innerHTML=i+1;
ol.appendChild(li);
}
//设置这些个小图标
varolLis=ol.children;
varimgWidth=screen.offsetWidth;
for(varj=0;j<olLis.length;j++){
olLis[j].index=j;
olLis[j].onmouseover=function(){
//排他思想
for(vari=0;i<olLis.length;i++){
olLis[i].className="";
}
this.className="current";
vartarget=-imgWidth*this.index;
cutton(ul,target,20);
//为了让点击事件和小面的小图标能够一一对应，设置他们的索引值相同
pic=square=this.index;
}
}
//给小图标设置一个初始样式
ol.children[0].className="current";
//给ul追加一张图
ul.appendChild(ul.children[0].cloneNode(true));
//设置箭头的显示与隐藏
box.onmouseover=function(){
arr.style.display="block";
//鼠标放上去的时候，不再自动滚动
clearInterval(timer);
}
box.onmouseout=function(){
arr.style.display="none";
//鼠标离开的时候，继续自动滚动
timer=setInterval(playNext,1000);
}
//设置点击左右小箭头的事件且要求小图标要跟着变化
//1.设置点击右侧箭头
varpic=0;//记录当前为第几项用
varsquare=0;//记录小图标的索引值
/*right.onclick=function(){//存在的问题是当移动到最后一张的时候，无法跳转到第一张
pic++;
vartarget=-pic*imgWidth;
cutton(ul,target,20);
}*/
//方法改进
/*right.onclick=function(){
//先对pic做一个判断，当pic的值为5的时候，实现一个跳转
if(pic==ulLis.length-1){
ul.style.left=0;
pic=0;
}
pic++;
vartarget=-pic*imgWidth;
cutton(ul,target,20);
if(square==olLis.length-1){
square=-1;//下面会加一，就变成了0
}
square++;
//排他思想
for(vari=0;i<olLis.length;i++){
olLis[i].className="";
}
olLis[square].className="current";
}*/
//使用封装函数
right.onclick=function(){
playNext();
}
//2.设置点击左侧箭头
left.onclick=function(){//要判断一下当pic为零时的情况
if(pic==0){
ul.style.left=-imgWidth*(ulLis.length-1)+"px";//要记得加单位
pic=ulLis.length-1;//给pic重新赋一个值
}
pic--;
vartarget=-pic*imgWidth;
cutton(ul,target,20);
//设置小图标样式
if(square==0){
square=olLis.length;
}
square--;
for(vari=0;i<olLis.length;i++){
olLis[i].className="";
}
olLis[square].className="current";
}
//设置自动滚动
//1.封装点击右侧小箭头事件
functionplayNext(){
//先对pic做一个判断，当pic的值为5的时候，实现一个跳转
if(pic==ulLis.length-1){
ul.style.left=0;
pic=0;
}
pic++;
vartarget=-pic*imgWidth;
cutton(ul,target,20);
if(square==olLis.length-1){
square=-1;//下面会加一，就变成了0
}
square++;
//排他思想
for(vari=0;i<olLis.length;i++){
olLis[i].className="";
}
olLis[square].className="current";
}
//2.调用这个封装的函数，并且设置一个间歇性计时器
vartimer=null;
timer=setInterval(playNext,1000);
//封装函数
functioncutton(obj,target,stp){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varstep=stp;
step=obj.offsetLeft>target?-step:step;
if(Math.abs(obj.offsetLeft-target)>=Math.abs(step)){
obj.style.left=obj.offsetLeft+step+"px";
}else{
obj.style.left=target+"px";
clearInterval(obj.timer);
}
},15)
}
</script>
</body>
</html>
补充：原生javascript实现banner图自动轮播切换
一般在做banner轮播图的时候都是用jquery，因为代码少，方便，不需要花费很长的时间去获取某个元素作为变量，然后再进行操作，只要一个$就搞定了。但是今天我用原生的javascript做了一下这个轮播效果，感觉还行，以下是部分js源代码，仅供参考！文章底部查看效果演示。
1、鼠标离开banner图，每隔2s切换一次；
2、鼠标滑过下方的小按钮，可以切换图片；
3、鼠标点击左右按钮，可以切换图片。
varoPic,oLi,anniu,aLi,aLength,num,timer,oG,_index,oSpan;
window.onload=function(){
oPic=document.getElementsByClassName("pic")[0];
oLi=oPic.getElementsByTagName("li");
anniu=document.getElementsByClassName("anniu")[0];
aLi=anniu.getElementsByTagName("li");
aLength=aLi.length;
num=0;
oG=document.getElementsByClassName("g")[0];
oSpan=oG.getElementsByTagName("span");
oLeft=oSpan[0];
oRight=oSpan[1];
start();
oG.onmouseover=end;
oG.onmouseout=start;
for(varj=0;j<aLength;j++){
aLi[j].index=j;
aLi[j].onmouseover=change;
}
oRight.onclick=time;
oLeft.onclick=times;
}
//自动轮播开始或结束
functionstart(){
timer=setInterval(time,2000);
hide();
}
functionend(){
clearInterval(timer);
show();
}
//图片切换++
functiontime(){
for(vari=0;i<aLength;i++){
oLi[i].style.display="none";
aLi[i].className="";
}
num++;
num=num%4;
oLi[num].style.display="block";
aLi[num].className="on";
}
//图片切换--
functiontimes(){
for(vari=0;i<aLength;i++){
oLi[i].style.display="none";
aLi[i].className="";
}
num--;
num=(num+4)%4;
oLi[num].style.display="block";
aLi[num].className="on";
}
//鼠标滑过按钮，图片轮播
functionchange(){
_index=this.index;
for(vark=0;k<aLength;k++){
aLi[k].className="";
oLi[k].style.display="none";
}
aLi[_index].className="on";
oLi[_index].style.display="block";
}
//左右按钮显示或隐藏
functionshow(){
oSpan[0].style.display="block";
oSpan[1].style.display="block";
}
functionhide(){
oSpan[0].style.display="none";
oSpan[1].style.display="none";
}
以上所述是小编给大家介绍的使用原生的javascript来实现轮播图，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！