jQuery实现轮播图

77 阅读 0 评论 51 点赞

我是靠谱客的博主冷静网络，最近开发中收集的这篇文章主要介绍jQuery实现轮播图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery实现轮播图

学习了js原生实现轮播图，今天我们尝试用jQuery库来实现，给你不一样的感觉。
上代码！！！
HTML中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <title>轮播演示</title>
</head>
<body>
    <div class="main">
        <div id="slide">
            <!-- ul:轮播图片 （宽高一致） -->
            <ul>
                <li><img src="img/轮播1.jpg"></li>
                <li><img src="img/轮播2.jpg"></li>
                <li><img src="img/轮播3.jpg"></li>
                <li><img src="img/轮播4.jpg"></li>
                <li><img src="img/轮播5.jpg"></li>
            </ul>
            <!-- 可点击的小图片区域 （宽高也保持一个值）-->
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
    </div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/index.js"></script>
</html>

css中：

body,
ul,
ol,
li {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

/* 设置主页面宽度 及居中 */
.main {
	width: 1200px;
	margin: 0 auto;
}

/* 设置轮播区域大小 */
#slide {
	width: 1200px;
	height: 500px;
	position: relative;
	overflow: hidden;
}

/* 轮播中的ul宽度为1000
#slide ul {
	width: 1000px;
} */

/* ul中li左浮动 */
#slide ul li {
	width: 1200px;
	height: 500px;
	/* display: none; */
	float: left;
}

#slide ul li .selected {
	display: block;
}

/* 设置图片的宽高 */
#slide ul li img {
	width: 100%;
	height: 500px;
}

/* 定位按钮的 */
#slide ol {
	position: absolute;
	/* top: 440px; */
	bottom: 50px;
	left: 50%;
	margin-left: -75px;
}

/* li中大小及位置 */
#slide ol li {
	width: 30px;
	height: 30px;
	float: left;
	margin: 0 10px;
	background: #000000;
	color: #fff;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
}

/* 默认给第一li选中 */
#slide ol li.active {
	background: #fff;
	color: #000;
}

/* 鼠标移入显示红色背景 */
#slide ol li:hover {
	background: #f00;
}

js中：

// jquery的入口函数，所有js文件在body后引入可以省略此入口函数
$(function(){
	// 默认启动轮播
	var aa=autoplay();
//    轮播图对应的小按钮
   $("#slide").hover( // 复合事件（鼠标移入、移出）
	   function(){
	   // 默认 鼠标移入时清空轮播定时器
	   clearInterval(aa);
   },function(){
	   // 鼠标离开时，默认重新调用轮播定时器
	   aa=autoplay();
   })
   
   // 轮播小按钮的点击事件
   $("#slide ol li").click(function(){
	   // 选中当前对象设置为‘active’样式 并清空其它兄弟节点的类样式
	   $(this).addClass("active").siblings().removeClass("active")
	   var i=$("#slide ol li").index(this);//获取被单击元素所在集合中索引值
	//    console.log(i*1200);
	   $("#slide ul").animate({marginLeft:-i*1200+"px"},500)
   })
   
   function autoplay(){
	 var auto=setInterval(function(){
			//先找出active元素
		   var obj=$("#slide ol").find(".active");
		   //获取该元素的索引 .index() 当前选中对象的索引值
		   var i=$("#slide ol li").index(obj);
		   //计算下一个单击的元素的索引值
		   if(i>=4){
			   i=0;  //如果该索引值为最后一个，下个单击对象应该为第一个
		   }else{
			   i++;  //如果不是最后一个，下个单击对象的索引值加1
		   }
		   //执行下一个单 （点击事件 没3秒钟执行一次）
		   $("#slide ol li").eq(i).trigger("click")
	 },1000);
	 return auto;
   }
})