<>强效果如下:
<强>代码如下:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>金桥自适应旗帜焦点图& lt;/title>
& lt;脚本src=" http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js "祝辞& lt;/script>
& lt; style>
@charset“utf - 8”;/*通用css */身体,ul, dl, dd, dt, ol,李,p, h2、h3, h4, h5,类推,h7,文本区域,形式,选择、自定义字段,表,td, div、输入{
保证金:0;
填充:0;
-webkit-text-size-adjust:没有;
}
h2、h3 h4、h5、类推,h7 {
字体大小:12 px;
粗细:正常;
}
身体比;div {
保证金:0汽车;
}
div {
text-align:左;
}
一个img {
边界:0;
}
身体{
颜色:# 333;
text-align:中心;
字体:12 px”宋体”;
}
ul、ol,李{
list-style-type:没有;
vertical-align: 0;
}
一个{
outline-style:没有;
颜色:# 535353;
文字修饰:没有;
}
答:{徘徊
颜色:# D40000;
文字修饰:没有;
}/*通用CSS结束,应用特效时,以上样式可删除*//*效果CSS开始*/.lit {
位置:绝对的;
z - index: 999;
margin-top: 10 px;
}
.lit p {
margin-bottom: 2 px;
}
.lit答:{徘徊
过滤器:α(不透明度=80);
透明度:0.8;
}
.wrapper {
宽度:986 px;
保证金:0汽车;
位置:相对;
身高:390 px;
}
#{旗帜
宽度:100%;
身高:390 px;
背景:无;
溢出:隐藏;
位置:相对;
}
# banner_img {
显示:块;
位置:相对;
}
李# banner_img {
位置:绝对的;
上图:0;
左:0;
宽度:100%;
背景位置:中心;
background-size:封面;
显示:没有;
}/*设置背景图片- - - - - - -开始*//* # banner_img李。item1 {
背景图片:url (http://smzdqiang.com/data/attachment/forum/201609/20/161359xzxwkl82k22d08r3.jpg);
显示:块;
}
# banner_img李。第二条{
背景图片:url (http://smzdqiang.com/data/attachment/forum/201609/20/161359viql2criqg5aw776.jpg);
}
# banner_img李。item3 {
背景图片:url (http://smzdqiang.com/data/attachment/forum/201609/20/161359eczultzb2c88mquq.jpg);
}
# banner_img李。item4 {
背景图片:url (http://smzdqiang.com/data/attachment/forum/201609/20/161400d3idxa6dfao84x1l.jpg);
}
# banner_img李。item6 {
背景图片:url (http://smzdqiang.com/data/attachment/forum/201609/20/161400eifr1ozgkikk99k1.jpg);
} *//*设置背景图片- - - - - - - - - -结束*/# banner_img .ad_img {
位置:绝对的;
右:10 px;
前:80像素;
宽度:506 px;
身高:404 px;
}
# banner_img .ad_txt {
位置:绝对的;
左:10 px;
前:170像素;
颜色:# fff;
文本阴影:1 px 1 px rgba(51岁,51,51岁,0.3);
}
# banner_img .ad_txt h3 {
字体:粗体36 px/60 px微软YaHei;
}
# banner_img .ad_txt一个{
显示:块;
宽度:100 px;
高度:25 px;
行高:25 px;
text-align:中心;
margin-top: 10 px;
背景:# fff;
颜色:# 666;
}
# banner_ctr {
位置:绝对的;
宽度:960 px;
身高:122 px;
margin-left: -90 px;
左:35%;
底部:-75 px;
z - index: 1;
}
# banner_ctr ul {
宽度:100%;
}
李# banner_ctr {
浮:左;
显示:inline-block;
高度:27 px;
text-align:中心;
vertical-align:中间;
光标:指针;
}
.styclsa {
行高:27 px;
背景:url (http://smzdqiang.com/data/attachment/forum/201609/20/161609g5xjijj1x5lgiq4j.png)不再重演;
高度:27 px;
颜色:# ffffff;
字体大小:12.48 px;
填充:0 px 0 px 0 0 px;
宽度:119 px;
保证金:0汽车;
溢出:隐藏;
字体类型:“宋体”;
变焦:1;
}
.astysa {
颜色:# ffffff;
字体大小:12.48 px;
text-align:中心;
}
# drag_ctr {
位置:绝对的;
上图:5 px;
光标:指针;
左:0 px;
宽度:119 px;
高度:32像素;
底部:120 px;
背景:url (http://smzdqiang.com/data/attachment/forum/201609/20/161611aooapbzu0da7oand.png)不再重演;
填充:0 px 0 px 0 0 px;
保证金:0汽车;
溢出:隐藏;
颜色:# fff;
过滤器:α(不透明度=50);
颜色:# ffffff;
}/*效果CSS结束*/& lt;/style>
& lt; script>
$(函数(){
var curIndex=0;
var=800;
var slideTime=6000;
var adTxt=$ (" # banner_img> li> div> .ad_txt”);
var adImg=$ (" # banner_img> li> div> .ad_img”);
var int=setInterval (“autoSlide ()”,slideTime);
$ (" # banner_ctr> ul>李[类!='第一项'][类!=弊詈笠幌睢癩”)。mouseover(函数(){
ct=$ var(这).index(“李# banner_ctr> ul>[类!='第一项'][类!=弊詈笠幌睢癩”);
如果(ct==1 | | ct==0) {
ct=0;
}
如果(ct==2 | | ct==3) {
ct=1;
}
如果(ct==5 | | ct==4) {
ct=2;
}
如果(ct==6 | | ct==7) {
ct=3;
}
如果(ct==8 | | ct==9) {
ct=4;
}
如果(ct & lt;0){
ct=0;
}
显示(ct);
window.clearInterval (int);
int=setInterval (“autoSlide (1)”,slideTime);
});
函数autoSlide (ct) {
curIndex + 1祝辞=5 & # 63;curIndex=1: 0;
显示(curIndex + 1);
}
函数显示(指数){
$ .easing.def=癳aseOutQuad”;
$ (" # drag_ctr”)。停止(假的,真正的)。动画({左:指数* 120 + 0},时间);
$ (" # banner_img>李”).eq (curIndex)。停止(假,真).fadeOut(时间);
adTxt.eq (curIndex)。停止(假的,真正的)。动画({:“340 px”},时间);
adImg.eq (curIndex)。停止(假的,真正的)。动画({右:“700 px”},时间);
setTimeout(函数(){
$ (" # banner_img>李”).eq(指数)。停止(假,真).fadeIn(时间);
adTxt.eq(索引)定格(p)。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
