<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery带文字动画图片轮播代码 - 站长素材</title>
<link rel="stylesheet" href="__PUBLIC__/Css/indexca.css"/>
<script type="text/javascript" src="__PUBLIC__/Js/jquery-2.1.1.min.js"></script>
<style>
.box{width:1920px;height:660px;margin:0 auto;position:relative}
.box img{width:100%;height:100%;position:absolute;display:none}
.box ul {list-style:none;position:absolute;right:30px;bottom:10px;}
.box ul li{width:30px;height:20px;border:1px solid #0037fd;float:left;margin-left:10px;text-align:center;line-height:20px;}
.ys{background:#0037fd}
.left{width:30px;height:40px;background:rgba(255,255,255,0.5);position:absolute;top:310px;left:10px;font-size:30px;line-height:40px;text-align:center}
.right{width:30px;height:40px;background:rgba(255,255,255,0.5);position:absolute;top:310px;right:10px;font-size:30px;line-height:40px;text-align:center}
</style>
</head>
<body>
<include file="Public/header"/>
<div class="box">
<a href="__APP__/Home/product/product_g"><img src="__PUBLIC__/Imager/589453510254609459.png" style="display:block"></a>
<a href="__APP__/Home/product/product_a"><img src="__PUBLIC__/Imager/p1_bg.jpg"></a>
<a href="__APP__/Home/product/product_b"><img src="__PUBLIC__/Imager/p2_bg.jpg"></a>
<a href="__APP__/Home/product/product_c"><img src="__PUBLIC__/Imager/p3_bg.jpg"></a>
<a href="__APP__/Home/product/product_d"><img src="__PUBLIC__/Imager/p4_bg.jpg"></a>
<a href="__APP__/Home/product/product_e"><img src="__PUBLIC__/Imager/diancan_bg6.jpg"></a>
<a href="__APP__/Home/product/product_f"><img src="__PUBLIC__/Imager/fenxiao_bg2.jpg"></a>
<ul>
<li class="ys">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
<script>
var q=0;
//alert($);
//焦点图切换（焦点背景颜色的切换）
$(".box ul li").mouseover(function(){
//划上当前li让其添加背景颜色，其余同级移除背景颜色
$(this).addClass("ys").siblings().removeClass("ys");
//定义变量获取当前li的索引值；
q=$(this).index();
//alert(q)
//通过当前索引匹配对应图片并进行显示，其余同级图片进行隐藏；
$(".box a").eq(q).show().siblings(".box a").hide()
})
//轮播图
function autoplay(){
times=setInterval(function(){
if(q>=6){q=0}
else{q++}
$(".box ul li").eq(q).addClass("ys").siblings(".box ul li").removeClass("ys");
$(".box a img").eq(q).fadeIn(800).siblings(".box a img").fadeOut(800)
},2000)
}
autoplay();
//鼠标划上停止轮播，划离启动轮播
$(".box").mouseover(function(){
clearInterval(times);
}).mouseout(function(){
autoplay();
})
//右按钮
$(".right").click(function(){
if(q>=6){q=0}
else{q++}
$(".box ul li").eq(q).addClass("ys").siblings(".box ul li").removeClass("ys");
$(".box img").eq(q).show().siblings(".box img").hide()
})
//左按钮
$(".left").click(function(){
if(q<=0){q=6}
else{q--}
$(".box ul li").eq(q).addClass("ys").siblings(".box ul li").removeClass("ys");
$(".box img").eq(q).show().siblings(".box img").hide()
})
</script>
<include file="Public/tail"/>
</body>
</html>
你也是牛逼啊，直接贴代码..
不转成code模式怎么看
直接操作a，不要操作img了，样式也要改下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery带文字动画图片轮播代码 - 站长素材</title>
<link rel="stylesheet" href="__PUBLIC__/Css/indexca.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>
.box {
width: 1920px;
height: 660px;
margin: 0 auto;
position: relative;
}
.box a,.box a img {
width: 100%;
height: 100%;
position: absolute;
display: none;
}
.box a img {display:block}
.box ul {
list-style: none;
position: absolute;
right: 30px;
bottom: 10px;
}
.box ul li {
width: 30px;
height: 20px;
border: 1px solid #0037fd;
float: left;
margin-left: 10px;
text-align: center;
line-height: 20px;
}
.ys {
background: #0037fd;
}
.left {
width: 30px;
height: 40px;
background: rgba(255,255,255,0.5);
position: absolute;
top: 310px;
left: 10px;
font-size: 30px;
line-height: 40px;
text-align: center;
}
.right {
width: 30px;
height: 40px;
background: rgba(255,255,255,0.5);
position: absolute;
top: 310px;
right: 10px;
font-size: 30px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<include file="Public/header" />
<div class="box">
<a href="__APP__/Home/product/product_g" style="display:block"><img src="__PUBLIC__/Imager/589453510254609459.png" alt="1"></a>
<a href="__APP__/Home/product/product_a"><img src="__PUBLIC__/Imager/p1_bg.jpg" alt="2"></a>
<a href="__APP__/Home/product/product_b"><img src="__PUBLIC__/Imager/p2_bg.jpg" alt="3"></a>
<a href="__APP__/Home/product/product_c"><img src="__PUBLIC__/Imager/p3_bg.jpg" alt="4"></a>
<a href="__APP__/Home/product/product_d"><img src="__PUBLIC__/Imager/p4_bg.jpg" alt="5"></a>
<a href="__APP__/Home/product/product_e"><img src="__PUBLIC__/Imager/diancan_bg6.jpg" alt="6"></a>
<a href="__APP__/Home/product/product_f"><img src="__PUBLIC__/Imager/fenxiao_bg2.jpg" alt="7"></a>
<ul>
<li class="ys">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
<script>
var q = 0;
//alert($);
//焦点图切换（焦点背景颜色的切换）
$(".box ul li").mouseover(function () {
//划上当前li让其添加背景颜色，其余同级移除背景颜色
$(this).addClass("ys").siblings().removeClass("ys");
//定义变量获取当前li的索引值；
q = $(this).index();
//alert(q)
//通过当前索引匹配对应图片并进行显示，其余同级图片进行隐藏；
$(".box a").eq(q).show().siblings(".box a").hide()
})
//轮播图
function autoplay() {
times = setInterval(function () {
if (q >= 6) { q = 0 }
else { q++ }
$(".box ul li").eq(q).addClass("ys").siblings(".box ul li").removeClass("ys");
$(".box a ").eq(q).fadeIn(800).siblings(".box a ").fadeOut(800)//////////
}, 2000)
}
//autoplay();
//鼠标划上停止轮播，划离启动轮播
$(".box").mouseover(function () {
clearInterval(times);
}).mouseout(function () {
autoplay();
})
//右按钮
$(".right").click(function () {
if (q >= 6) { q = 0 }
else { q++ }
$(".box ul li").eq(q).addClass("ys").siblings(".box ul li").removeClass("ys");
$(".box a").eq(q).show().siblings(".box a").hide()
})
//左按钮
$(".left").click(function () {
if (q <= 0) { q = 6 }
else { q-- }
$(".box ul li").eq(q).addClass("ys").siblings(".box ul li").removeClass("ys");
$(".box a").eq(q).show().siblings(".box a").hide()//////////////////
})
</script>
<include file="Public/tail" />
</body>
</html>