jQuery实现轮播图效果
Posted Q_zhangsan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现轮播图效果相关的知识，希望对你有一定的参考价值。
通过改变背景色来达到效果，有下角标和左右箭头，都已经实现。
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<link rel="stylesheet" type="text/css" href="css/5---.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/5---.js"></script>
</head>
<body>
<div id="box">
<ul id="imgs">
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a class="_left" href="#">左</a>
<a class="_right" href="#">右</a>
</div>
</body>
</html>
jq代码：
var index = 0; var timer; $(function(){ $(‘#list li‘).eq(0).css(‘background‘,‘gold‘) //点击页码换图 $(‘#list li‘).click(function(){ clearInterval(timer) index = $(this).index() $(‘#imgs li‘).eq(index).fadeIn().siblings().fadeOut() $(this).css(‘background‘,‘gold‘).siblings().css(‘background‘,‘‘) timer = setInterval(change,1000) }) //鼠标滑过停止 $(‘#imgs li‘).hover( function(){ clearInterval(timer) }, function(){ timer = setInterval(change,1000) } ) //左右切换 $(‘._left‘).click(function(){ clearInterval(timer) index -= 2; change(); timer = setInterval(change,1000) }) $(‘._right‘).click(function(){ clearInterval(timer) change(); timer = setInterval(change,1000) }) timer = setInterval(change,1000) }) function change(){ if(index >= 3){ index = 0; } if(index == -1){ index = 2 } $(‘#imgs li‘).eq(index).fadeIn().siblings().fadeOut() $(‘#list li‘).eq(index).css(‘background‘,‘gold‘).siblings().css(‘background‘,‘‘) index++; }
思路千千种！
以上是关于jQuery实现轮播图效果的主要内容，如果未能解决你的问题，请参考以下文章
前端javascript+jQuery实现旋转木马效果轮播图slider