Jquery实现简单的轮播效果(代码管用)

前端技术 2023/09/03 JavaScript

废话不多说了，直接给大家贴jquery代码了，具体代码如下所示：

<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Title</title>
<link rel=\"stylesheet\" href=\"css/index.css\">
<script src=\"js/jquery-1.11.3.js\"></script>
<script src=\"js/baner.js\"></script>
</head>
<body>
<div class=\"main\">
<a href=\"\"><img src=\"img/baner-1.jpg\" alt=\"\"></a>
<a href=\"\"><img src=\"img/baner-2.jpg\" alt=\"\"></a>
<a href=\"\"><img src=\"img/baner-3.jpg\" alt=\"\"></a>
<a href=\"\"><img src=\"img/baner-4.jpg\" alt=\"\"></a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html> 
/*************初始化************/
*{margin:0;padding: 0;border: none;list-style: none}
/*********轮播左右居中*************/
.main{
width: 1024px;
height: 320px;
margin: 0 auto;
position: relative;
}
.main a{
position: absolute;
}
.main a img{
width: 100%;
height: 320px;
}
/***********左边小图标************/
.main ul li.selected{
background: #f97157;
}
.main ul{
position: absolute;
z-index: 999;
top: 120px;
left: 20px;
}
.main ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background: #909090;
cursor: pointer;
text-align: center;
} 
/**
* Created by Administrator on 16-3-12.
*/
/***********定义全局变量和定时器*************/
var t=null;
var n=0;/**动态变化**/
var count;
/************************/
$(function(){
count=$(\".main a\").length;/*给动态变化的n备用*/
/**让不是轮播中的第一个隐藏**/
$(\".main a:not(:first-child)\").hide();
/*点击当前li当前li对应的图片显示出来*/
$(\".main ul li\").click(function(){
var index=$(this).text()-1;
n=index;
console.log(n);
/*****让当前显示的图片0.5S内渐隐，并匹配下一个渐显示*****/
$(\".main a\").filter(\":visible\").fadeOut(500).parent().children().eq(index).fadeIn(1000);
/*******聚焦，给当前li追加类，改变背景色*******/
$(this).addClass(\"selected\");
/****同时移除当前li的所有兄弟的类名为selected，还原背景色*****/
$(this).siblings().removeClass(\"selected\");
});
/***定义定时器3秒执行一次****/
t=setInterval(\"autoMove()\",3000);
/****当鼠标进入时候定时器停止，移除时候定时器开启****/
$(\".main\").hover(function(){clearInterval(t)}, function(){t = setInterval(\"autoMove()\", 3000);});
});
/***定义自动轮播函数****/
function autoMove(){
if(n>=(count-1)){
n=0;
}else{
++n;
}
/*****给li执行匹配的事件*****/
$(\".main ul li\").eq(n).trigger(\"click\");
}

以上所述是小编给大家介绍的Jquery实现简单的轮播效果，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/7481

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案