JQuery,JS实现图片轮播

JQuery实现图片轮播

JS代码:

<script>
var imgCount = 5;//定义图片数量
var index = 1;
var intervalId;
var buttonSpan = $('.pointer')[0].children;//pointer的第0个圆点开始获取它的孩子元素
autoNextPage();//自动跳转到下一页
function autoNextPage(){
 intervalId = setInterval(function(){//设置定时器
 nextPage();//调用跳转到下一页的函数
 },2000);//2000毫秒执行一次播放
}
$('.box1').mouseover(function(){//鼠标光标移入图片触发
 clearInterval(intervalId);//清除定时器
});
$('.box1').mouseout(function(){//鼠标光标移出图片触发
 autoNextPage();//调用自动跳转函数
});
clickButtons();
function clickButtons(){//点击圆点函数
	var length = buttonSpan.length;
	for(var i=0;i<length;i++){
		buttonSpan[i].onclick = function(){//当有圆点被点击时触发
			$(buttonSpan[index-1]).removeClass('on');
			//当前圆点去除on类型(注意这里去除on的圆点不是我们点击的那个圆点)
				if($(this).attr('index')==1){//如果点击的是第一个圆点,将index设置为5
				index = 5;
			}else{
				index = $(this).attr('index')-1;//将index设置为左前面一个
 			}
  		nextPage();//调用跳转到下一页函数
		};
	}
}
function nextPage(){//跳转到下一页函数
var targetLeft = 0;//图片移动的最终距离
$(buttonSpan[index-1]).removeClass('on');//正在轮播当前圆点去除on类型
if(index == 5){//如果是最后一张,将它轮播到第一张
	targetLeft = 0;
	index = 1;
	}
	else{
		index++;//index++,代表当前圆点右边的那个圆点
		targetLeft = -500*(index-1);
} 
$('.list').animate({left:targetLeft+'px'});//将图片移动到计算出来的图片最终位置
$(buttonSpan[index-1]).addClass('on');//给新的圆点添加on类型
}
</script>

HTML代码:

HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播界面</title>
<style>
.box1{
  top:40px;
  width:500px;
  height:300px;
  overflow: hidden;
  position:relative;
  margin:0 auto;
  border-radius:80px;
 }
 .list{
  width:2500px;
  height:400px;
  position:absolute;
 }
 .list>img{
  float:left;
  width:500px;
  height:400px;
 }
 .pointer{
  position:absolute;
  width:100px;
  bottom:20px;
  left:250px;
 }
 .pointer>span{
  display:inline-block;
  width:10px;
  height:10px;
  background: #7b7d80;
  border-radius:50%;
  border:1px solid #fff;
 }
 .pointer .on{
  background: #00F5FF;
 }
</style>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<h2>轮播界面</h2>
<div style="border:2px solid #2F4F4F"></div> 
 <div class="box1">
	 <div class="list" style="left:0px;">
		  <img src="./img/dog.jpg"/>
		  <img src="./img/bg1.png"/>
		  <img src="./img/bg3.jpg"/>
		  <img src="./img/img1.png"/>
		  <img src="./img/bg5.jpg"/>
	 </div>
	 <div class="pointer">
		  <span index="1" class="on"></span>
		  <span index="2"></span>
		  <span index="3"></span>
		  <span index="4"></span>
		  <span index="5"></span>
	 </div>
 </div>
<script>
var imgCount = 5;//定义图片数量
var index = 1;
var intervalId;
var buttonSpan = $('.pointer')[0].children;//pointer的第0个圆点开始获取它的孩子元素
autoNextPage();//自动跳转到下一页
function autoNextPage(){
 intervalId = setInterval(function(){//设置定时器
 nextPage();//调用跳转到下一页的函数
 },2000);//2000毫秒执行一次播放
}
$('.box1').mouseover(function(){//鼠标光标移入图片触发
 clearInterval(intervalId);//清除定时器
});
$('.box1').mouseout(function(){//鼠标光标移出图片触发
 autoNextPage();//调用自动跳转函数
});
clickButtons();
function clickButtons(){//点击圆点函数
	var length = buttonSpan.length;
	for(var i=0;i<length;i++){
		buttonSpan[i].onclick = function(){//当有圆点被点击时触发
			$(buttonSpan[index-1]).removeClass('on');
			//当前圆点去除on类型(注意这里去除on的圆点不是我们点击的那个圆点)
				if($(this).attr('index')==1){//如果点击的是第一个圆点,将index设置为5
				index = 5;
			}else{
				index = $(this).attr('index')-1;//将index设置为左前面一个
 			}
  		nextPage();//调用跳转到下一页函数
		};
	}
}
function nextPage(){//跳转到下一页函数
var targetLeft = 0;//图片移动的最终距离
$(buttonSpan[index-1]).removeClass('on');//正在轮播当前圆点去除on类型
if(index == 5){//如果是最后一张,将它轮播到第一张
	targetLeft = 0;
	index = 1;
	}
	else{
		index++;//index++,代表当前圆点右边的那个圆点
		targetLeft = -500*(index-1);
} 
$('.list').animate({left:targetLeft+'px'});//将图片移动到计算出来的图片最终位置
$(buttonSpan[index-1]).addClass('on');//给新的圆点添加on类型
}
</script>
</body>
</html>

本例源于(脚本之家https://www.jb51.net/article/145772.htm)
演示效果:

显示效果

发布了3 篇原创文章 · 获赞 3 · 访问量 42
展开阅读全文
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览