轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

uhhuh-495

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量97

点赞数

分类专栏：功能（方法）实现案例文章标签：轮播图 Jquery JavaScrip 前端

本文链接：https://blog.csdn.net/weixin_42166007/article/details/96624138

版权

功能（方法）实现案例专栏收录该内容

26 篇文章 0 订阅

订阅专栏

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link type="text/css" rel="stylesheet" href="css/slider.css" />
		<title>轮播图练习</title>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="js/slider.js"></script>
	</head>
	<body>
		<div class="slider_box">
			
			<!--轮播图片-->
			<ul class="slider_img_box">
				<li class="slider_img_box_li">
					<a href=""><img src="img/pic_3.jpg" alt="第一张图片" /></a>
				</li>
				<li class="slider_img_box_li">
					<a href=""><img src="img/pic_5.jpg" alt="第二张图片" /></a>
				</li>
				<li class="slider_img_box_li">
					<a href=""><img src="img/pic_7.jpg" alt="第三张图片" /></a>
				</li>
				<li class="slider_img_box_li">
					<a href=""><img src="img/pic_9.jpg" alt="第四张图片" /></a>
				</li>
			</ul>
			
            <!--轮播圆点-->
			<ul class="slider_dot"></ul>
			
			<!--轮播按钮-->
			<div class="slider_btn">
				<span class="prev"><</span>
				<span class="next">></span>
			</div>
		</div>
	</body>
</html>

Css:

*{
	margin: 0;
	padding: 0;
}
/*取消列表的图标内容*/
ul{
	list-style: none;
}
/*对整体窗口的设置*/
.slider_box{
	width: 560px;
	height: 480px;
	border: 1px solid #ccc;
	margin: 10px auto;
	position: relative;
	overflow: hidden;
}
/*图片盒子样式*/
.slider_img_box{
	width: 560px;
	height: 480px;
	position: absolute;
	top: 0;
	left: 0;
}
.slider_img_box_li{
	width: 560px;
	height: 480px;
    float: left;	
}
.slider_img_box_li img{
	width: 560px;
	height: 480px;
}
/*圆点样式*/
.slider_dot{
	position: absolute;
	width: 100%;
	bottom: 10px;
	text-align: center;
	font-size: 0;
}
.slider_dot li{
	width: 10px;
	height: 10px;
	background:rgba(0,0,0,0.5);
	margin: 0 5px;
	display: inline-block;  /*行内块元素*/
	border-radius: 100%;
	cursor: pointer;
}
/*上下页按钮样式*/
.slider_btn{
	display: none;
}
.slider_btn span{
	display: block;
	width: 50px;
	height: 100px;
	background: rgba(0,0,0,0.6);
	color: chartreuse;
	font-size: 40px;
	line-height: 80px;
	text-align: center;
	cursor: pointer;
}
.prev{
	 position: absolute;
	 top: 50%;
	 margin-top: -50px;
	 left: 0;
}
.next{position: absolute;
	 top: 50%;
	 margin-top: -50px;
	 right: 0;}
/*圆点选中样式	*/ 
.slider_dot .active{
	background-color: #fff;
}
.hide{
    display: none;
}

Js：

//界面加载完毕执行以下程序
$(function(){
    //初始化需要的变量
	var i = 0;
	var timer = null;
    //根据图片个数添加圆点
	for(var j = 0;j < $('.slider_img_box_li').length;j++){
		$(".slider_dot").append('<li></li>');
	};
    //设置默认第一个圆点样式
	$('.slider_dot li').first().addClass('active');
    //鼠标移入轮播范围显示按钮,移出则隐藏
	$('.slider_box').hover(function(){
		$('.slider_btn').show();
	},function(){
		$('.slider_btn').hide();
	});
    //复制第一张图片
	var firstimg = $('.slider_img_box li').first().clone();
    //将第一张图片与前面图片相连,并计算出总宽度
	$('.slider_img_box').append(firstimg).width($('.slider_img_box_li').length * $('.slider_img_box_li img').width());
    //设置自动轮播
    timer = setInterval(function(){
    	i++;
    	if(i == $('.slider_img_box li').length){  //i和第一张图片下标都是为0
    		i = 1;
    		$('.slider_img_box').css('left','0'); //保证无缝轮播，改变位置的是ul
    	};
    	$('.slider_img_box').stop().animate({left:-i * 560},500);  //设置每次轮播移动的距离
    	//设置圆点跟着变化
    	if(i == $('.slider_img_box li').length - 1){
    		//设置当轮播到追加的第一张图片时，第一个圆点显示
    		$('.slider_dot li').eq(0).addClass('active').siblings().removeClass('active');
    	}else{
    		//设置显示图片对应的图片
    		$('.slider_dot li').eq(i).addClass('active').siblings().removeClass('active');
    	};
    },3000)
    //鼠标移入，暂停自动播放；鼠标移出，开始自动播放;.hover(移入执行函数，移出执行函数)
    $('.slider_box').hover(function(){
    	//鼠标移入，暂停自动播放
    	clearInterval(timer);
    },function(){
    	//鼠标移出，开始自动播放
    	timer = setInterval(function(){
	    	i++;
	    	if(i == $('.slider_img_box li').length){  //i和第一张图片下标都是为0
	    		i = 1;
	    		$('.slider_img_box').css('left','0'); //保证无缝轮播
	    	};
	    	$('.slider_img_box').stop().animate({left:-i * 560},500);  //设置每次轮播移动的距离
	    	//设置圆点跟着变化
	    	if(i == $('.slider_img_box li').length - 1){
	    		//设置当轮播到追加的第一张图片时，第一个圆点显示
	    		$('.slider_dot li').eq(0).addClass('active').siblings().removeClass('active');
	    	}else{
	    		//设置显示图片对应的图片
	    		$('.slider_dot li').eq(i).addClass('active').siblings().removeClass('active');
	    	};
	    },3000)
    });
    //设置跳转上一张按钮
    $('.prev').click(function(){
    	i--;
    	if(i == -1){
    		i = $('.slider_img_box li').length - 2;  //i等于-1则表示i等于不追加第一张图片时的最后一张图片的下标
            //显示当前图片
    		$('.slider_img_box').css({left:-($('.slider_img_box li').length - 1) * 560});
    	}
        //跳转显示下一张图片
    	$('.slider_img_box').stop().animate({left:-i * 560},500);
        //显示对应圆点选中样式
    	$('.slider_dot li').eq(i).addClass('active').siblings().removeClass('active');
    });
    //设置跳转下一张按钮
    $('.next').click(function(){
    	i++;
    	if(i == $('.slider_img_box li').length){
    		i = 1;
    		$('.slider_img_box').css({left:0});
    	};
    	$('.slider_img_box').stop().animate({left:-i * 560},500);
        //圆点的length比图片的length少一个,所以要进行判断
    	if(i == $('.slider_img_box li') - 1){
    		$('.slider_dot li').eq(0).addClass('active').siblings().removeClass('active');
    	}else{
    		$('.slider_dot li').eq(i).addClass('active').siblings().removeClass('active');
    	};
    });
    //鼠标划入圆点
    $('.slider_dot li').mouseover(function(){
        //获取圆点对应的下标
    	var _index = $(this).index();
    	i = _index;
        //显示对应下标的图片
    	$('.slider_img_box').stop().animate({left:-_index * 560},300);
        //显示对应下标的圆点选中样式
    	$('.slider_dot li').eq(_index).addClass('active').siblings().removeClass('active');
    });
})

uhhuh-495

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图

HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <link type="text/css" rel="stylesheet" href="css/slider.css" /> <title>轮播图练习</title> &...
复制链接

扫一扫