js轮播
Posted gxw123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js轮播相关的知识，希望对你有一定的参考价值。
//第一种(js写法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.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: 0px;
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;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: ‘黑体‘;
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id=‘box‘>
<div class="screen">
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol></ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
// 找人
var box=document.getElementById("box");
var screen=box.children[0];
var ul=screen.children[0];
var lis=ul.children;
var ol=screen.children[1];
var imgWidth=screen.offsetWidth;
var arr=document.getElementById("arr");
var left=document.getElementById("left");
var right=document.getElementById("right");
var timer=null;
// 1.动态加载ol中的内容
for(var i=0;i<lis.length;i++){
// 创建Li标签并且添加到ol中
var li=document.createElement("li");
// 每一个指示器中的数字应该是1-5
li.innerHTML=i+1;
// 把创建好的Li标签添加到ol中
ol.appendChild(li);
}
var ollis=ol.children;
// 先试着把第一个指示器的背景色变成黄色
ollis[0].className="current";
// 克隆第一张图片并添加到ul中
var firstImg=lis[0].cloneNode(true);
ul.appendChild(firstImg);
// 2.鼠标经过按钮 并且图片跟着移动
// 2.1鼠标经过指示器，指示器显示黄色
// 2.2 指示器index变化的同时，图片移动
for(var j=0;j<ollis.length;j++){
// 记录一下每一个循环的li标签的Index
ollis[j].index=j;
// 给每一个ol下的li绑定鼠标滑过事件
ollis[j].onmouseover=function(){
for(var k=0;k<ollis.length;k++){
// 干掉所有人
ollis[k].className="";
}
// 留下我自己
this.className="current";
// 图片移动
var target=-(this.index*imgWidth);
animate(ul,target);
// 让squre/pic/index数值统一一下
squre=pic=this.index;
}
}
// 3.鼠标点击时，图片移动
// 3.1鼠标滑动到盒子上时，出现两个箭头
box.onmouseover=function(){
arr.style.display="block";
clearInterval(timer);
}
box.onmouseout=function(){
arr.style.display="none";
timer=setInterval(nextImg, 1000);
}
var pic=0;
// 点击右箭头，图片移动
right.onclick=function(){
// 判断当图片移动到最后一张，让pic重置，图片移动到第一张
if(pic===lis.length-1){
ul.style.left=0+"px";
pic=0;
}
pic++;
var target=-(imgWidth*pic);
animate(ul,target);
if(squre<ollis.length-1){
squre++;
}else{
squre=0;
}
for(var k=0;k<ollis.length;k++){
// 干掉所有人
ollis[k].className="";
}
// 留下我自己
ollis[squre].className="current";
}
left.onclick=function(){
// 判断当图片移动到第一张，让pic值为第一张图片的Index，图片移动到最后一张
if(pic===0){
ul.style.left=-((lis.length-1)*imgWidth)+"px";
pic=lis.length-1;
}
pic--;
var target=-(imgWidth*pic);
animate(ul,target);
if(squre>0){
squre--;
}else{
squre=ollis.length-1;
}
for(var k=0;k<ollis.length;k++){
// 干掉所有人
ollis[k].className="";
}
// 留下我自己
ollis[squre].className="current";
}
// 4.添加自动滚动
timer=setInterval(nextImg,1000);
var squre=0;
function nextImg(){
if(pic===lis.length-1){
ul.style.left=0+"px";
pic=0;
}
pic++;
var target=-(imgWidth*pic);
animate(ul,target);
if(squre<ollis.length-1){
squre++;
}else{
squre=0;
}
for(var k=0;k<ollis.length;k++){
// 干掉所有人
ollis[k].className="";
}
// 留下我自己
ollis[squre].className="current";
}
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var leader = obj.offsetLeft;
var step = 9;//
step = leader < target ? step : -step;
leader = leader + step;
if (Math.abs(leader - target) > Math.abs(step)) {
obj.style.left = leader + "px";
} else {
obj.style.left = target + "px";//一定要记得加单位
clearInterval(obj.timer);
}
}, 15);
}
</script>
</body>
</html>
第二种（jquery写法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.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: 0px;
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;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: ‘黑体‘;
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id=‘box‘>
<div class="screen">
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
var n=0;
var $li=$(".screen ul li"); //声明变量减少服务器的请求次数
var $ul=$(".screen ul");
var $oli=$(".screen ol li");
var $arr=$("#arr");
var imgWidth=$li.width();
// var timer=null;
//克隆第一个图片
var oLi=$li.eq(0).clone(true);
//把克隆的图片加到ul后面
$ul.append(oLi);
var size=$li.size(); //获取li的个数
// console.log(size);
//滑过数字小图标大图跟着动
$oli.mouseenter(function(){
n=$(this).index();
tab();
})
//点击右箭头移动轮播图
$("#box #arr #right").click(function(){
toRight();
})
//点击左箭头移动轮播图
$("#box #arr #left").click(function(){
toLeft();
})
//指到盒子上左右箭头出现 离开隐藏
$("#box").hover(function(){
$arr.css("display","block");
clearInterval(timer);
},function(){
$arr.css("display","none");
autoPlay();
})
//自动轮播
autoPlay();
function autoPlay(){
timer=setInterval(function(){
toRight();
},1500)
}
//封装左箭头
function toLeft(){
n--;
if(n<0){
$ul.css("left",-size*imgWidth+"px");
n=size-1;
}
tab();
};
//封装右箭头
function toRight(){
n++;
if(n>size){
n=1;
$ul.css("left",0);
}
if(n==size){
$oli.eq(0).addClass("current").siblings().removeClass("current");
}
tab();
}
//封装移动动画
function tab(){
$ul.stop().animate({left:-imgWidth*n+"px"},200);
$oli.eq(n).addClass("current").siblings().removeClass("current");
}
})
</script>
</body>
</html>
以上是关于js轮播的主要内容，如果未能解决你的问题，请参考以下文章