html菜单轮播图,JavaScript中带有子菜单和控件的slider轮播图效果的实现

大家或许做过(照片轮播)无限滚动图片的项目，但是，如果使用普通的滚动，当到达最后一张时，便会滚动回第一张，这是一个非常不好的用户体验。下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果，具体实现代码如下所示：

实现效果：

实现原理：

// 步骤

// 1. 获取事件源以及相关元素

// 2. 复制第一张图片所在的li，添加到ul的最后面

// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮

// 4. 鼠标放到ol的li上切换图片

// 5. 添加定时器

// 6. 左右切换图片(鼠标放上去隐藏，移开显示)

实现代码：

轮播图

*{

padding: 0;

margin: 0;

list-style: none;

border: 0;

}

.all{

width: 500px;

height: 200px;

padding: 7px;

margin: 100px auto;

position: relative;

box-shadow: 1px 1px 5px #2d2d2d;

}

.screen{

width: 500px;

height: 200px;

overflow: hidden;

position: relative;

}

.screen li{

width: 500px;

height: 200px;

overflow: hidden;

float: left;

}

.screen ul{

position: absolute;

left: 0;

top: 0;

width: 3000px;

}

.all ol{

position: absolute;

right: 10px;

bottom: 10px;

line-height: 20px;

text-align: center;

}

.all ol li{

float: left;

width: 20px;

height: 20px;

text-align: center;

background-color: #fff;

border: 1px solid #ccc;

margin-left: 10px;

cursor: pointer;

}

.all ol li.current{

background-color: #03c03c;

}

#arr{

display: none;

}

#arr span{

width: 40px;

height: 40px;

left: 5px;

top: 50%;

position: absolute;

margin-top: -20px;

background-color: #000;

cursor: pointer;

line-height: 35px;

text-align: center;

font-weight: bold;

font-family: "微软雅黑";

font-size: 30px;

color: #fff;

opacity: 0.3;

border-radius: 50%;

box-shadow: 1px 1px 3px #2d2d2d;

}

#arr #right{

right: 5px;

left: auto;

}

• 
• 
• 
• 
• 

<

>

// 赋值第一张图片放到ul的最后，当图片切换到第五张的时候，直接切换第六张，再从第一张切换到第二张的时候先瞬间切换到第一张图片，然后滑倒第二张

// 步骤

// 1. 获取事件源以及相关元素

// 2. 复制第一张图片所在的li，添加到ul的最后面

// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮

// 4. 鼠标放到ol的li上切换图片

// 5. 添加定时器

// 6. 左右切换图片(鼠标放上去隐藏，移开显示)

// 1. 获取事件源以及相关元素

var all = document.getElementById("all");

var screen = all.firstElementChild || all.firstChild;

var imgWidth = screen.offsetWidth;

var ul = screen.firstElementChild || screen.firstChild;

var ol = screen.children[1];

var p = screen.lastElementChild || screen.lastChild;

var spanArr = p.children;

// 2. 复制第一张图片所在的li，添加到ul的最后面

var ulNewLi = ul.children[0].cloneNode(true);

ul.appendChild(ulNewLi);

// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮

for(var i=0; i

var olNewLi = document.createElement("li");

olNewLi.innerHTML = i+1;

ol.appendChild(olNewLi);

}

var olLiArr = ol.children;

olLiArr[0].className = "current";

// 4. 鼠标放到ol的li上切换图片

for(var i=0; i

// 自定义属性，把索引值绑定到元素的index属性上

olLiArr[i].index = i;

olLiArr[i].onmouseover = function(){

// 排他思想

for(var j=0; j

olLiArr[j].className = "";

}

this.className = "current"

// 鼠标放到小方块上时，索引值和key以及square同步

// key = this.index;

// square = this.index;

key = square = this.index;

// 移动盒子

animate(ul, -this.index*imgWidth);

}

}

// 5. 添加定时器

var timer = setInterval(autoPlay, 1000);

// 固定向右切换图片

// 两个定时器(一个记录图片，一个记录子菜单栏)

var key = 0;

var square = 0;

function autoPlay(){

// 通过key的自增来模拟图片的索引值，然后移动ul

key++;

if(key > olLiArr.length){

// 图片已经滑到最后一张，接下来应该跳转到第一张，然后滑动到第二张

ul.style.left = 0;

key = 1;

}

animate(ul, -key*imgWidth);

// 通过控制square的自增来模拟小方块的索引值，然后点亮盒子

// 排他思想做小方块

square++;

if(square > olLiArr.length-1){

// 索引值不能大于5，如果大于5则立即变为0；

square = 0;

}

for(var i=0; i

olLiArr[i].className = "";

}

olLiArr[square].className = "current";

}

// 鼠标放上去清除定时器，移开启动定时器

all.onmouseover = function(){

p.style.display = "block";

clearInterval(timer);

}

all.onmouseout = function(){

p.style.display = "none";

timer = setInterval(autoPlay,1000);

}

// 6. 左右切换图片(鼠标放上去显示，移开隐藏)

spanArr[0].onclick = function(){

// 通过控制key的自增来模拟图片的索引值，然后移动ul

key--;

if(key<0){

// 先移到最后一张，然后key的值取前一张的索引值，然后向前移动

ul.style.left = -imgWidth*(olLiArr.length) + "px";

key = olLiArr.length-1;

}

animate(ul, -key*imgWidth);

// 通过控制square的自增来模拟小方块的索引值，然后点亮小方块

square--;

if(square<0){

// 索引值不能大于等于5，如果为5，立即变为0

square = olLiArr.length-1;

}

for(var i=0; i

olLiArr[i].className = "";

}

olLiArr[square].className = "current";

}

spanArr[1].onclick = function(){

// 右侧的和定时器一模一样

autoPlay();

}

// 动画封装

var absSpeed = 10; //设定步长

function animate(ele, target){

clearInterval(ele.timer);

var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;

ele.timer = setInterval(function(){

var val = target - ele.offsetLeft;

ele.style.left = ele.offsetLeft + speed + "px";

if(Math.abs(val) < Math.abs(speed)){

ele.style.left = target + "px";

clearInterval(ele.timer);

}

}, 10)

}

总结