<!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>
分享
