php 轮播图,JS轻松实现轮播图

这次给大家带来JS轻松实现轮播图，JS轻松实现轮播图的注意事项有哪些，下面就是实战案例，一起来看一下。

思路：

1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片

2、Container内有个放图片的list进行position的定位 ，其中的图片采用float的方式，同时当图片进行轮播时，改变list的Left值使得其显示的图片发生变化。

3、图片的轮播使用定时器，通过定时器改变list的Left值是的图片循环展示

4、当鼠标滑动到图片上时，清除定时器，图片停止轮播，当鼠标移出时继续进行轮播

5、图片上有一组小圆点用于与当前显示的图片相对应，同时可以通过点击的方式查看对应的图片

6、图片可以通过点击进行左右滑动显示

代码：

轮播图

.container{

margin:0 auto;

width:600px;

height:400px;

position: relative;

overflow: hidden;

border:4px solid gray;

box-shadow: 3px 3px 5px gray;

border-radius:10px;

}

.list{

width:4200px;

height:400px;

position: absolute;

top:0px;

}

img{

float:left;

width:600px;

height:400px;

}

.dots{

position: absolute;

left:40%;

bottom:30px;

list-style: none;

}

.dots li{

float:left;

width:8px;

height:8px;

border-radius: 50%;

background: gray;

margin-left:5px

}

.dots .active{

background: white;

}

.pre,.next{

position: absolute;

top:40%;

font-size:40px;

color:white;

text-align:center;

background: rgba(128,128,128,0.5);

/* display:none;*/

}

.pre{

left:30px;

}

.next{

right:30px;

}

<

>

var index=1,timer;

function init(){

eventBind();

autoPlay();

}

init();

function autoPlay(){

timer =setInterval(function () {

animation(-600);

dotIndex(true);

},1000)

}

function stopAutoPlay() {

clearInterval(timer);

}

function dotIndex(add){

if(add){

index++;

}

else{

index--;

}

if(index>5){

index = 1;

}

if(index<1){

index=5;

}

dotActive();

}

function dotActive() {

vardots=document.getElementsByClassName("dot");

varlen=dots.length;

for(vari=0;i

dots[i].className="dot";

}

for(vari=0;i

/*此处可以不用parseInt，当不用全等时*/

if(index === parseInt(dots[i].getAttribute("index"))){

dots[i].className="dot active";

}

}

}

function eventBind(){

/*点的点击事件*/

vardots=document.getElementsByClassName("dot");

varlen=dots.length;

for(vari=0;i

(function(j){

dots[j].οnclick=function(e){

varind=parseInt(dots[j].getAttribute("index"));

animation((index - ind)*(-600));/*显示点击的图片*/

index= ind;

dotActive();

}

})(i)

}

/*容器的hover事件*/

varcon=document.getElementsByClassName("container")[0];

/*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/

con.οnmοuseοver=function(e) {

stopAutoPlay();

}

con.οnmοuseοut=function(e){

autoPlay();

}

/*箭头事件的绑定*/

varpre=document.getElementsByClassName("pre")[0];

varnext=document.getElementsByClassName("next")[0];

pre.οnclick=function(e) {

dotIndex(false);

animation(600);

}

next.οnclick=function(e) {

dotIndex(true);

animation(-600);

}

}

function animation(offset){

varlists=document.getElementsByClassName("list")[0];

varleft=parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;

if(left

lists.style.left="-600px";

}

else if(left>-600){

lists.style.left = "-3000px";

}

else{

lists.style.left = left+"px";

}

}