html+css+jQuery广告图片切换代码

2025-11-03 16:53:04

1、准备好需要的素材

2、新建html文档。

html+css+jQuery广告图片切换代码

3、书写hmtl代码。

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</ul>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</ul>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</ul>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</div>

</a> </li>

</ul>

</div>

</div>

html+css+jQuery广告图片切换代码

4、书写css。

* { margin: 0; padding: 0; list-style: none; }

body { background: #ccc; }

a { text-decoration: none; }

img { border: none; }

.tggg { width: 1180px !important; margin: 0px auto; }

.tggg { display: block; opacity: 1; padding: 25px 0; clear: both; font-size: 0; width: 100%; }

.theatre-label { background: #8ac024; width: 84px; color: #fff; font-size: 12px; text-align: center; line-height: 22px; border-radius: 4px 4px 0 0; }

.tggg_ks { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 10px 1px; width: 100%; border: 1px solid #8ac024; position: relative; overflow: hidden; }

.tggg_ks_1 { height: 140px; overflow: hidden; margin: 0 auto; width: 1120px; }

.tggg_zuojian { left: 4px; background: url("images/arrow-left.png") no-repeat 50%; }

.tggg_zuojian:hover { background: url("images/arrow-left-hover.png") no-repeat 50%; }

.tggg_youjian { right: 4px; background: url("images/arrow-right.png") no-repeat 50%; }

.tggg_youjian:hover { background: url("images/arrow-right-hover.png") no-repeat 50%; }

.tggg_jiantou { width: 15px; height: 26px; cursor: pointer; text-indent: -999px; position: absolute; top: 50%; margin-top: -13px; }

.tggg_ks_2 { width: 5000px; height: 170px; margin-left: -10px; display: inline-block; line-height: 0; }

.theatre-item { width: 170px; overflow: hidden; transition: all .7s cubic-bezier(.46, .98, .54, 1.1); -webkit-transition: all .7s cubic-bezier(.46, .98, .54, 1.1); -moz-transition: all .7s cubic-bezier(.46, .98, .54, 1.1); -o-transition: all .7s cubic-bezier(.46, .98, .54, 1.1); float: left; margin: 0 10px; background-color: #fff; cursor: pointer; s

}

.theatre-expand { width: 930px; }

.theatre-left { float: left; width: 170px; }

.theatre-left img { width: 100%; display: block; }

.theatre-poster { height: 100px; }

.theatre-logo { height: 40px; }

.theatre-right { float: left; margin-left: 20px; }

.theatre-banner { opacity: 0; transition: all .7s cubic-bezier(.46, .98, .54, 1.1); -webkit-transition: all .7s cubic-bezier(.46, .98, .54, 1.1); -moz-transition: all .7s cubic-bezier(.46, .98, .54, 1.1); -o-transition: all .7s cubic-bezier(.46, .98, .54, 1.1); width: 740px; display: block; }

.aa { width: 930px; z-index: 100; }

.aa .theatre-banner { opacity: 1; }

.bb { width: 0px; margin: 0px; }

html+css+jQuery广告图片切换代码

5、书写css。引用<script src="jquery-1.11.3.min.js"></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>

html+css+jQuery广告图片切换代码

6、代码整体结构

html+css+jQuery广告图片切换代码

7、查看效果

html+css+jQuery广告图片切换代码

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。