jQuery爱奇艺广告图片切换代码
以上只是部份演示图片，详细可以付费购买。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery爱奇艺广告图片切换代码</title>
<link type="text/css" rel="stylesheet" href="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/index.css" />
<script type="text/javascript" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="tggg">
<div class="theatre-label">推广广告</div>
<div class="tggg_ks">
<div class="tggg_ks_1">
<div class="tggg_zuojian tggg_jiantou" id="tggg_zuojian"></div>
<div class="tggg_ks_2" id="limitbuy">
<ul class="products">
<li class="theatre-item tggg1">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-1.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_1.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg1">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-1.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_1.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg1">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-1.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_1.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg1">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-1.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_1.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg1">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-1.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_1.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg1">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-1.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_1.jpg">
</div>
</div>
</a>
</li>
</ul>
<ul class="products">
<li class="theatre-item tggg2">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-2.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-2.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_2.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg2">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-2.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-2.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_2.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg2">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-2.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-2.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_2.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg2">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-2.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-2.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_2.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg2">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-2.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-2.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_2.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg2">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-2.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-2.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_2.jpg">
</div>
</div>
</a>
</li>
</ul>
<ul class="products">
<li class="theatre-item tggg3">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-3.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-3.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_3.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg3">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-3.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-3.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_3.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg3">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-3.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-3.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_3.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg3">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-3.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-3.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_3.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg3">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-3.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-3.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_3.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg3">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-3.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-3.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_3.jpg">
</div>
</div>
</a>
</li>
</ul>
<ul class="products">
<li class="theatre-item tggg4">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-4.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-4.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_4.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg4">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-4.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-4.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_4.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg4">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-4.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-4.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_4.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg4">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-4.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-4.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_4.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg4">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-4.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-4.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_4.jpg">
</div>
</div>
</a>
</li>
<li class="theatre-item tggg4">
<a href="">
<div class="theatre-expand">
<div class="theatre-left">
<img class="theatre-poster" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-4.jpg">
<img class="theatre-logo" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg2-4.jpg">
</div>
<div class="theatre-right">
<img class="theatre-banner" src="//xcdn.php.cn/js/ads/jQuery爱奇艺广告图片切换代码/images/tggg1-1_4.jpg">
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="tggg_youjian tggg_jiantou" id="tggg_youjian"></div>
</div>
</div>
</div>
<script>
$(function(){
var lb_cur = 1,
t = 1;
function showLimitBuyProducts(){
if(lb_cur < 1){
lb_cur = 4;
}
else if(lb_cur > 4){
lb_cur = 1;
}
var products = $("#limitbuy .products").hide().eq(lb_cur-1).show(),
ta = products.find("textarea");
}
//左边点击
$("#tggg_zuojian").click(function(){
lb_cur--;
showLimitBuyProducts();
});
//右边点击
$("#tggg_youjian").click(function(){
lb_cur++;
showLimitBuyProducts();
});
//手风琴样式
$(".theatre-item").mouseover(function(){
if($(this).index()==5){
$(this).addClass('aa');
$(this).siblings().addClass('bb');
$(this).siblings().eq(0).removeClass('bb');
//$('.theatre-item:eq(0)').removeClass('bb');
}else{
//console.log($(this).index());//调试jsconsole.log()获取li的下标
$(this).addClass('aa');
$(this).siblings().addClass('bb');
$(this).next().attr('class','theatre-item');
}
})
$(".theatre-item").mouseout(function(){
$(this).attr('class','theatre-item');
$(this).siblings().removeClass('bb');
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.niuniubbs.com" target="_blank">牛牛论坛</a></p>
</div>
</body>
</html>
以上代码中的图片和JS，请下载到自己网站目录中使用！
这个行，我来试试
页:
[1]