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

1、准备好需要的素材

2、新建html文档。

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; }

6、代码整体结构