Heim > Artikel > Web-Frontend > Jquery实现简单的轮播效果(代码管用)_jquery
Jquery实现简单的轮播效果(代码管用)_jquery
- WBOYOriginal
- 2016-05-16 15:10:421496Durchsuche
废话不多说了，直接给大家贴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实现简单的轮播效果，希望对大家有所帮助！
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript正则表达式匹配 div style标签_javascript技巧Nächster Artikel：Angularjs整合微信UI（weui）