jquery实现轮播图

jquery实现轮播图

• 一、实现功能：
  1. 通过定时实现图片自我轮播
  2. 当图片轮播到最后一张时，会从第一张开始继续轮播
  3. 点击小圈圈图标能自动切换到对应图片
  4. 鼠标悬浮图片上停止图片轮播，当鼠标移开图片，会继续轮播
  5. 鼠标悬浮图片上会显示左右键图标，鼠标离开，会隐藏左右键图标
  6. 点击左键图标会切换到上一张图片，当切换到第一张图片时，再次点击左键图标会切换到最后一张图片；点击右键图标会显示到下一张图片，当切换到最后一张图片时，再次点击右键图标会切换达到第一张图片。

**

• 二、实现代码：
• 1、css代码：

<style>
	/*设置body*/
	body{
		margin:0;
		padding:0;
		font:16px "微软雅黑",sans-serif;
		}
	/*设置轮播图的边框相对定位*/
	.play-box{
		position:relative;
		width:500px;
		height:313px;
		margin:100px auto;
		border:1px solid #ccc;
		}
	/*设置边框下的图片*/
	.play-box img{
		width:500px;
		height:313px;
		border:0;
		}
	/*设置超链接下的所有图片不显示*/
	.play-box a{
		display:block;  /*现在是文本状态，要修改为块状*/
		overflow:hidden; /*隐藏超过边框高度的图片*/
		opacity:0;  /*默认图片为全透明*/
		height:0;   /*默认高度为0*/
		transition:opacity .5s; /*默认透明度过渡时间为0.5s*/
		}
	/*设置当前图片显示*/
	#imgList a.current{
		opacity:1;  /*默认图片显示*/
		height:auto;  /*默认高度为自动*/
		}
	/*设置列表ul*/
	ul{
		margin:0;
		padding:0;
		list-style:none;
		}
	/*设置列表ul下的li*/	
	ul li{
		width:10px;
		height:10px;
		margin:0 4px;
		font-size:0;
		border-radius:50%;
		background-color:#fff;
		cursor:pointer;
		float:left;
		}
	/*当图片变化时，图标也跟着变化*/
	ul li.current{
		background-color:red;
		}
	/*设置图标绝对定位*/
	.iconList{
		position:absolute;
		bottom:10px;
		left:50%;
		margin-left:-45px;
	}
	/*设置向左向右图标*/
	.sliderbar{
		position:absolute;
		top:50%;
		margin-top:-25px;
		width:30px;
		height:50px;
		font-family:simsun;
		color:#fff;
		text-align:center;
		line-height:50px;
		background-color:#000;
		opacity:.6;
		display:none;
		cursor:pointer;
		}
	/*设置向左图标*/
	.slidebar-left{
		left:0;
		}
	/*设置向右图标*/
	.slidebar-right{
		right:0;
		}
</style>

• 2、body代码

<!--轮播图边框-->
	<div id="playBox" class="play-box">
    <!--图片列表-->
    	<div id="imgList">
        	<a href="#" target="_blank" class="current">
       			<img src="image/5.jpg"/>
            </a>
        	<a href="#" target="_blank">
       			<img src="image/6.jpg"/>
            </a>
            <a href="#" target="_blank">
       			<img src="image/7.jpg"/>
            </a>
            <a href="#" target="_blank">
       			<img src="image/8.jpg"/>
            </a>
            <a href="#" target="_blank">
       			<img src="image/9.jpg"/>
            </a>
        </div>
        <!--图标列表-->
        <div class="iconList">
        	<ul>
            	<li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
       <!--左箭头-->
        <div class="sliderbar slidebar-left"><</div>
        <!--右箭头-->
        <div class="sliderbar slidebar-right">></div>
    </div>

• 3、jquery代码：

<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$(document).ready(function(){
		//设置变量速度为3秒
		var speed = 3000;
		//循环变量为1，是避免定时器再等第一章图片
		var m = 1;
		//设置定时器的函数和时间
		var playTimer = setInterval(runPlay,speed);
		//定时函数
		function runPlay(){
			//判读如果m大于4，就设置m=0
			if(m>4){
				m=0;
				}
			//调用controlPlay函数来控制图片变化
			controlPlay(m);
			m++;
			}
		//通过参数控制图片的变化,图标变化
		function controlPlay(n){
			$("#imgList a").removeClass("current").eq(n).addClass("current");
			$("ul li").removeClass("current").eq(n).addClass("current");
			}
		//给整个轮播图绑定鼠标事件，当鼠标放到轮播图上停止轮播图，当鼠标离开轮播图继续滚动
		$("#playBox").mouseenter(function(){
			//停止定时
			clearInterval(playTimer);
			//左右控制按钮显示
			$(".sliderbar").fadeIn(300);
			}).mouseleave(function(){
				//重新开始定时
				playTimer =setInterval(runPlay,speed);
				//左右控制按钮隐藏
				$(".sliderbar").fadeOut(300);
				});
		//给li绑定控制图标绑定单击事件
		$("ul li").click(function(){
			controlPlay($(this).index());
			//鼠标点击过后修改m的值
			m =$(this).index()+1;
			}).hover(function(){
				//给li取消鼠标悬停的冒泡
				return false;
				})
		//给左右的控制图标取消 鼠标悬停的冒泡
		$(".sliderbar").hover(function(){
			return false;
			})
		//下一张图片
		$(".slidebar-right").click(function(){
			//判断m的值
			if(m>4){
				m=0;
				}
			//显示下一站图片
			controlPlay(m);
			m ++;
			})
		//上一张图片
		$(".slidebar-left").click(function(){
			//m默认显示下一张，所以为了显示上一张，m必须减2
			m -= 2;
			if(m<0){
				m=4;
				}
			//显示上一张图片
			controlPlay(m);
			//保证m要显示下一张
			m ++;
			})	
		});
</script>

**

• 三、实现效果图
  1、默认显示效果
  
  **
  2、鼠标悬浮效果
  
  **