用jQuery实现图片切换（JQ进阶篇）
Posted PHP项目中心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jQuery实现图片切换（JQ进阶篇）相关的知识，希望对你有一定的参考价值。
步骤解析：
到jQuery官网下载jq插件，并且引进来。
<script type="text/javascript" ></script>
写html代码：
代码示范：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" ></script>
<script language="JavaScript" type="text/javascript" ></script>
</head>
<body>
<div class="content">
<div class="banner">
<ul>
<li><a href="pro_details.html"><img alt=""/></a></li>
<li><a href="pro_details.html"><img alt=""/></a></li>
<li><a href="pro_details.html"><img alt=""/></a></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</body>
</html>
写CSS样式：
代码示范：
li{list-style-type: none;}
.banner{width: auto;height: 600px;position: relative;overflow: hidden;margin-bottom: 8px;}
.banner ul{width: 1920px;height: 600px;position: absolute;left: 50%;margin-left: -960px;}
.banner ul li{width: 1920px;height: 600px;display: none;position: absolute;}
.banner ul li a{display: block;width: 1920px;height: 600px;}
.banner ul li img{width: 1920px;height: 600px;}
.banner ol{width: 150px;height: 28px;position: absolute;left: 50%; margin-left: -75px;bottom: 32px;}
.banner ol li{width: 28px;height: 28px;background: url(../img/tab.png) no-repeat;float: left;margin: 0 11px 0 11px;}
.banner ol .on{background: url(../img/tab_hover.png) no-repeat;cursor: pointer;}
写jQuery语句：
代码示范：
$(function(){
var oPic=$('.banner ul li');
var oTab=$('.banner ol li');
var num=0;
var timer=setInterval(turn,1500);
function fnTab(){
oPic.fadeOut();
oPic.eq(num).fadeIn();
oTab.removeAttr('class')
oTab.eq(num).attr('class','on')
}
fnTab();
function turn(){
num++;
if(num==oPic.length){
num=0
}
fnTab();
}
oTab.mouseover(function(){
if(!$(this).hasClass('on')){
clearInterval(timer);
oTab.removeAttr('class');
$(this).attr('class','on');
var i=$(this).index();
oPic.fadeOut();
oPic.eq(i).fadeIn();
num=i;
}
});
$('.banner').mouseover(function(){
clearInterval(timer);
});
$('.banner').mouseout(function(){
timer=setInterval(turn,1500);
});
})
技术微周刊
「技术微周刊」分享技术文章与动态。周刊的内容会挑选出一周的精彩内容，有技术干货、技术动态，也有技术人生，欢迎关注与分享。
php项目中心
以上是关于用jQuery实现图片切换（JQ进阶篇）的主要内容，如果未能解决你的问题，请参考以下文章
JQuery实现点击按钮切换图片(附源码)--JQuery基础