网页轮播图代码部分

HTML：

</ul>

</ul>

</div>

CSS：

.lunbotu {

position: absolute;

width: 600%;

}

.lunbotu li {

float: left;

}

/*lunbotu*/

.shang {

position: relative;

float: left;

width: 520px;

height: 280px;

overflow: hidden;

}

.prev,.next {

position: absolute;

display: none;

width: 20px;

height: 30px;

top: 50%;

margin-top: -15px;/*垂直居中算法*/

background-color: rgba(0,0,0,.3);

text-align: center;

line-height: 30px;

z-index: 2;

}

/*lunbotu*/

.prev {

left: 0;

border-top-right-radius: 15px;/*圆角边框*/

border-bottom-right-radius: 15px;

}

.next {

display: none;

right: 0;

border-top-left-radius: 15px;/*圆角边框*/

border-bottom-left-radius: 15px;

}

/*lunbotu*/

.next:hover {

color: #fff;

}

.prev:hover {

color: #fff;

}

.promo-nav {

position: absolute;

bottom: 15px;

left: 50%;

width: 70px;

height: 13px;

margin-left: -35px;

background:rgba(255,255,255,.3);

border-radius: 7px;

}

.promo-nav li {

width: 8px;

height: 8px;

float: left;

background-color: #fff;

border-radius: 50%;

margin: 3px;

}

.promo-nav .selected {

background-color: #ff5000;

}

index.js：

//轮播图

//这里的load是等页面其他元素加载完再加载

var prev = document.querySelector('.prev');

var next = document.querySelector('.next');

var shang = document.querySelector('.shang');

window.addEventListener('load', function () {

shang.addEventListener('mouseenter', function () {

prev.style.display = 'block';

next.style.display = 'block';

clearInterval(timer);

timer=null;//清除定时器

})

shang.addEventListener('mouseleave', function () {

prev.style.display = 'none';

next.style.display = 'none';

timer=setInterval(function(){

//手动调用点击事件

next.click();

},2000);

})

//动态生成小圆圈,

//小圆圈排他思想

var lunbotu = document.querySelector('.lunbotu');

var promonav = document.querySelector('.promo-nav');

for (var i = 0; i < lunbotu.children.length - 1; i++) {

var li = document.createElement('li');

//记录当前小圆圈的索引号通过自定义属性来做

li.setAttribute('index', i);

//把小li插入到promonav里面

promonav.appendChild(li);

//在生成小圆圈的同时直接绑定点击事件

li.addEventListener('click', function () {

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

promonav.children[i].className = '';

}

this.className = 'selected';

//点击小圆圈，移动图片，移动的是ul

//ul的移动距离算法：小圆圈索引号乘以图片的宽度注意是负值因为要往左走

//当我们点击了某个小li 就拿到当前小li的索引号

var index = this.getAttribute('index');

//当我们点击了某个小li 就要把这个li得索引号给num与circle

num=index;

circle=index;

var lunbotuWidth = (lunbotu.offsetWidth) / (lunbotu.children.length);//获得每张图片的大小

animate(lunbotu, -index * lunbotuWidth);

})

}

promonav.children[0].className = 'selected';

//点击右侧滚动一张

var lunbotuWidth = (lunbotu.offsetWidth) / (lunbotu.children.length);

var next = document.querySelector('.next');

//circle控制小圆圈的播放

var circle = 0;

var num = 0;

next.addEventListener('click', function () {

//如果走到了最后复制的一张图片，此时我们得ul要快速复原 left改为0 无缝滚动

if (num == lunbotu.children.length - 1) {

lunbotu.style.left = 0;

num = 0;

}

num++;

animate(lunbotu, -num * lunbotuWidth);

circle++;

if(circle==lunbotu.children.length - 1){

circle=0;

}

//点击右侧按钮，小圆圈跟着一起变化，可以再声明一个变量控制小圆圈的播放

//先清除其余小圆圈selected类名；

for (var i = 0; i < lunbotu.children.length - 1; i++) {

promonav.children[i].className='';

}

promonav.children[circle].className ='selected';

//留下当前的小圆圈的selected类名

})

//点击左侧滚动一张

prev.addEventListener('click', function () {

//如果走到了最后复制的一张图片，此时我们得ul要快速复原 left改为0 无缝滚动

if (num == 0) {

lunbotu.style.left =-(lunbotu.children.length-1)*lunbotuWidth+'px';

num = lunbotu.children.length-1;

}

num--;

animate(lunbotu, -num * lunbotuWidth);

circle--;

if(circle<0){

circle=promonav.children.length-1;

}

//点击右侧按钮，小圆圈跟着一起变化，可以再声明一个变量控制小圆圈的播放

//先清除其余小圆圈selected类名；

for (var i = 0; i < lunbotu.children.length - 1; i++) {

promonav.children[i].className='';

}

promonav.children[circle].className ='selected';

//留下当前的小圆圈的selected类名

})

//自动播放轮播图

//nb

var timer=setInterval(function(){

//手动调用点击事件

next.click();

},2000);

animate.js:

function animate(obj, target, callback) {

// console.log(callback); callback = function() {} 调用的时候 callback()

// 先清除以前的定时器，只保留当前的一个定时器执行

clearInterval(obj.timer);

obj.timer = setInterval(function() {

// 步长值写到定时器的里面

// 把我们步长值改为整数不要出现小数的问题

// var step = Math.ceil((target - obj.offsetLeft) / 10);

var step = (target - obj.offsetLeft) / 10;

step = step > 0 ? Math.ceil(step) : Math.floor(step);

if (obj.offsetLeft == target) {

// 停止动画本质是停止定时器

clearInterval(obj.timer);

// 回调函数写到定时器结束里面

// if (callback) {

// // 调用函数

// callback();

// }

callback && callback();

}

// 把每次加1 这个步长值改为一个慢慢变小的值步长公式：(目标值 - 现在的位置) / 10

obj.style.left = obj.offsetLeft + step + 'px';

}, 15);

}

//点击右侧按钮，图片滚动yi'z

posted @ 2021-03-13 23:31 YoungPzz 阅读(378) 评论(0) 收藏举报

刷新页面返回顶部

YoungPzz

网页轮播图 代码部分

公告

网页轮播图代码部分