本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码，供大家参考，具体内容如下

图片轮播

.warp{

width: 600px;

height: 750px;

position: relative;

margin:30px auto 0;

overflow: hidden;

}

#box{

width: 600px;

height: 750px;

position: absolute;

top: 0px;

left: 0px;

overflow: hidden;

/*overflow-x:auto;*/

}

#box #con{

width: 6000px;

height: 750px;

overflow: hidden;

}

#con img{

float: left;

width: 600px;

height: 750px;

}

#btnL{

position: absolute;

left: 0px;

top: 366px;

width: 36px;

height: 36px;

background: url(images/btnL.png) 0 0 no-repeat;

cursor: pointer;

}

#btnR{

position: absolute;

right: 0px;

top: 366px;

width: 36px;

height: 36px;

background: url(images/btnR.png) 0 0 no-repeat;

cursor: pointer;

}

#num{

position: absolute;

bottom: 10px;

left: 148px;

overflow: hidden;

list-style: none;

}

#num li{

float: left;

margin:0 5px;

font-size: 16px;

line-height: 25px;

height: 25px;

width: 25px;

background: #ccc;

text-align: center;

cursor: pointer;

}

#num li.select{

background-color: green;

color: white;

}

var box=document.getElementById('box');

var con=document.getElementById('con');

var imgs=con.getElementsByTagName('img');

var btnL=document.getElementById('btnL');

var btnR=document.getElementById('btnR');

var num=document.getElementById('num');

var lis=num.getElementsByTagName('li');

var timer1=null,timer2=null;

var imgw=imgs[0].clientWidth;

var x=0;

function imgScroll(){//图片切换

var start=box.scrollLeft;

var end=imgw*x;

var change=end-start;

var minstep=0;

var maxstep=30;

var stepLength=change/maxstep;

clearInterval(timer2);

timer2=setInterval(function(){

minstep++;

// console.log(minstep);

if (minstep>=maxstep) {

clearInterval(timer2);

}

start+=stepLength;

box.scrollLeft=start;

},20)

for (var i = 0; i < lis.length; i++) {

lis[i].className='none';

}

lis[x].className='select';

}

function move(){//默认向左每隔3s滚动

clearInterval(timer1);

timer1=setInterval(function(){

x++;

if (x>=imgs.length) {

x=0;

}

imgScroll();

for (var i = 0; i < lis.length; i++) {

lis[i].className='none';

lis[x].className='select';

}

},3000);

}

move();//启动默认滚动函数；

btnR.οnclick=function(){

clearInterval(timer1);

x++;

if (x>=imgs.length) {

x=0;

}

imgScroll();

move();

}

btnL.οnclick=function(){

clearInterval(timer1);

x--;

if (x<0) {

x=imgs.length-1;

}

imgScroll();

move();

}

for (var i = 0; i < lis.length; i++) {

lis[i].index=i;

lis[i].οnclick=function(){

x=this.index;

imgScroll();

move();

}

}

具体效果我是仿照hao123导航页面图片轮播的效果，大家可以去那个网站参考

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。