【锋利的JQuery-学习笔记】广告栏
2020-11-22 20:12
标签:style blog http java color os 效果图: html: css : js: 【锋利的JQuery-学习笔记】广告栏,搜素材,soscw.com 【锋利的JQuery-学习笔记】广告栏 标签:style blog http java color os 原文地址:http://www.cnblogs.com/easy5weikai/p/3702990.html div id="jnImageroll">
a href="#nogo" id="JS_imgWrap">
img src="images/ads/1.jpg" alt="相约情人节"/>
img src="images/ads/2.jpg" alt="新款上线"/>
img src="images/ads/3.jpg" alt="愤怒小鸟特卖"/>
img src="images/ads/4.jpg" alt="男鞋促销第一波"/>
img src="images/ads/5.jpg" alt="春季新品发布"/>
a>
div>
a href="###1">em>相约情人节em>em>全场119元起em>a>
a href="###2">em>新款上线em>em>全场357元起em>a>
a href="###3">em>愤怒小鸟特卖em>em>全场89元em>a>
a href="###4">em>男鞋促销第一波em>em>全场3.1折起em>a>
a href="###5" class="last">em>春季新品发布em>em>全场4.1折起em>a>
div>
div>
/* 大屏广告 */
#jnImageroll {
float: left;
height: 320px;
margin: 0 11px 0 0;
overflow: hidden;
position: relative;
width: 550px;
}
#jnImageroll img {
position: absolute;
left: 0;
top: 0;
}
#jnImageroll div {
bottom: 0;
overflow: hidden;
position: absolute;
float: left;
}
#jnImageroll div a {
background-color: #444444;
color: #FFFFFF;
display: inline-block;
float: left;
height: 32px;
margin-right: 1px;
overflow: hidden;
padding: 5px 15px;
text-align: center;
width: 79px;
}
#jnImageroll div a:hover {
text-decoration: none;
}
#jnImageroll div a em {
cursor: pointer;
display: block;
height: 16px;
overflow: hidden;
width: 79px;
}
#jnImageroll .last {
margin: 0;
width: 80px;
}
#jnImageroll a.chos {
background: url("../images/adindex.gif") no-repeat center 39px #37A7D7;
color: #FFFFFF;
}
../images/adindex.gif"是:白色三角形:
$(function () {
var $imgrolls = $("#jnImageroll div a");
var $len = $imgrolls.lenth;
var index = 0;
var adTimer = null;
$imgrolls.css("opacity", 0.7);
$imgrolls.mouseover(function () {
index = $imgrolls.index(this);
showImage(index);
}).eq(0).mouseover();
//滑入 停止动画,滑出开始动画.
$("#jnImageroll").hover(function () {
if (adTimer) {
clearInterval(adTimer);
}
}, function () {
adTimer = setInterval(function () {
showImage(index);
index++;
if ($len == index) {
index = 0;
}
}, 3000);
}).trigger("mouseleave");
});
//显示不同的幻灯片
function showImage(index) {
var $rollobj = $("#jnImageroll");
var $imgWrap = $("#JS_imgWrap");
var $rollList = $rollobj.find("div a");
var newhref = $rollList.eq(index).attr("href");
$imgWrap.attr("href", newhref);
$imgWrap.find("img").eq(index).stop(true, true)
.fadeIn()
.siblings().fadeOut();
$rollList.removeClass("chos").css("opacity", 0.7)
.eq(index).addClass("chos").css("opacity", 1);
}
上一篇:EL与JSTL
下一篇:node.js 安装 测试