轮播图在Java你如何做出来的_来一个自己写的轮播图

话不多说，上干货，注意外部js文件，别引用错了，外部js文件在下面会给出

轮播图

*{

padding:0px;

margin: 0px;

list-style:none;

}

.start{

position:relative;

height: 250px;

width: 400px;

margin:100px auto 0px;

border:2px solid black;

overflow: hidden;

}

.start .start1{

height:250px;

width:2000px;

position: absolute;

left:0px;

top:0px;

}

.start .start1 li{

float:left;

height:250px;

width:400px;

}

.start .start1 li img{

width:100%;

height: 100%;

}

.start .btn {

position: absolute;

top: 50%;

margin-top: -20px;

width: 40px;

height: 40px;

color: #fff;

background-color: #000;

text-align: center;

line-height: 40px;

opacity: 0.1;

cursor: pointer;

}

.start:hover .btn {

opacity: 0.7;

}

.start .leftbtn {

left: 15px;

}

.start .rightbtn {

right: 15px;

}

.start .end {

position: absolute;

width: 100%;

bottom: 15px;

text-align: center;

}

.start .end span {

display: inline-block;

width: 15px;

height: 6px;

background-color: #ccc;

margin-right: 10px;

cursor: pointer;

}

.start .end .active {

background-color: #f40;

}

• 

• 

• 

• **图片的话自己可以修改哈，还有位置。**

• 

<

>

**这个外部引用的js文件下面会给出**

var timer = null;

var sliderPage = document.getElementsByClassName('start1')[0];

var moveWidth = sliderPage.children[0].offsetWidth;

var num = sliderPage.children.length - 1;

var leftBtn = document.getElementsByClassName('leftbtn')[0];

var rightBtn = document.getElementsByClassName('rightbtn')[0];

var oSpanArray = document.getElementsByClassName('end')[0].getElementsByTagName('span');

var lock = true;

var index = 0;

leftBtn.onclick = function () {

autoMove('right->left');

}

rightBtn.onclick = function () {

autoMove('left->right');

}

**这个部分是按钮**

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

(function (myIndex) {

oSpanArray[i].onclick = function () {

lock = false;

clearTimeout(timer);

index = myIndex;

startMove(sliderPage, {left: - index * moveWidth}, function () {

lock = true;

timer = setTimeout(autoMove, 1500);

changeIndex(index);

})

}

})(i)

}

**上面这部分是让索引可以点击跳转图片**

function autoMove (direction) {

**加lock是为了让你点击按钮快速的时候不出错**

if (lock) {

lock = false;

clearTimeout(timer);

**默认方向为向左**

if (!direction || direction == 'left->right') {

index++;

**startMove()是一个外部的js文件的函数下面会给大家**

startMove(sliderPage, {left: sliderPage.offsetLeft - moveWidth}, function () {

if (sliderPage.offsetLeft == - num * moveWidth) {

index = 0;

sliderPage.style.left = '0px';

}

timer = setTimeout(autoMove, 1500);

lock = true;

changeIndex(index);

});

}else if (direction == 'right->left') {

if (sliderPage.offsetLeft == 0) {

sliderPage.style.left = - num * moveWidth + 'px';

index = num;

}

index--;

startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () {

timer = setTimeout(autoMove, 1500);

lock = true;

changeIndex(index);

})

}

}

}

**这个是让索引按第几个图片动**

function changeIndex (_index) {

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

oSpanArray[i].className = '';

}

oSpanArray[_index].className = 'active';

}

timer = setTimeout(autoMove, 1500);

**这个是外部的js文件，是一个让图片运动的文件**

function getStyle (obj, attr) {

if (obj.currentStyle) {

return obj.currentStyle[attr];

}else {

return window.getComputedStyle(obj, false)[attr];

}

}

// object是dom(元素)，data是对象，function是函数传方法

function startMove (obj, data, func) {

clearInterval(obj.timer);

var iSpeed;

var iCur;

var name;

startTimer = obj.timer = setInterval(function () {

var bStop = true;

for (var attr in data) {

if (attr === 'opacity') {

name = attr;

iCur = parseFloat(getStyle(obj, attr)) * 100;

}else {

iCur = parseInt(getStyle(obj, attr));

}

iSpeed = ( data[attr] - iCur) / 8;

if (iSpeed > 0) {

iSpeed = Math.ceil(iSpeed);

}else {

iSpeed = Math.floor(iSpeed);

}

if (attr === 'opacity') {

obj.style.opacity = ( iCur + iSpeed ) / 100;

}else {

obj.style[attr] = iCur + iSpeed + 'px';

}

if ( Math.floor(Math.abs(data[attr] - iCur)) != 0 ) {

bStop = false;

}

}

if (bStop) {

clearInterval(obj.timer);

if (name === 'opacity') {

obj.style.opacity = data[name] / 100;

}

func();

}

},30);

}