分享一個輪顯廣告的實現方法

HTML
首先html中的<head>中使用了jquery的類庫
<scriptsrc="js/jquery-1.4.2.min.js"type="text/javascript"></script>
  1. <divclass="slides"name="__DT">

  2. <ulclass="slide-pic">

  3. <li><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a>

  4. <liclass="cur"><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a>

  5. <li><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a>

  6. <li><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a>

  7. <li><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a></li>

  8. </ul>

  9. <ulclass="slide-li op">

  10. <liclass="cur"></li>

  11. <li></li>

  12. <li></li>

  13. <li></li>

  14. <li></li>

  15. </ul>

  16. <ulclass="slide-li slide-txt">

  17. <liclass="cur"><ahref="#">ceshi</a></li>

  18. <li><ahref="#">ceshi</a></li>

  19. <li><ahref="#">ceshi</a></li>

  20. <li><ahref="#">ceshi</a></li>

  21. <li><ahref="#">ceshi</a></li>

  22. </ul>

  23. </div>

JS
注意cur這個class的使用,不要麼每個<li>都加上class="cur"而是應該讓js來實現它的變換在最後引用了js文件,注意文件要放在<body>標籤裏,爲了更快的加載,最好把js文件放到body的末尾
<scriptsrc="js/hp1.js"type="text/javascript"></script>
文件的具體內容
  1. var defaultOpts = { interval: 5000, fadeInTime: 300, fadeOutTime: 200 };

  2. //Iterate over the current set of matched elements

  3. var _titles = $("ul.slide-txt li");

  4. var _titles_bg = $("ul.op li");

  5. var _bodies = $("ul.slide-pic li");

  6. var _count = _titles.length;

  7. var _current = 0;

  8. var _intervalID = null;

  9. var stop = function() { window.clearInterval(_intervalID); };

  10. var slide = function(opts) {

  11. if (opts) {

  12. _current = opts.current || 0;

  13. } else {

  14. _current = (_current >= (_count - 1)) ? 0 : (++_current);

  15. };

  16. _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function() {

  17. _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);

  18. _bodies.removeClass("cur").eq(_current).addClass("cur");

  19. });

  20. _titles.removeClass("cur").eq(_current).addClass("cur");

  21. _titles_bg.removeClass("cur").eq(_current).addClass("cur");

  22. }; //endof slide

  23. var go = function() {

  24. stop();

  25. _intervalID = window.setInterval(function() { slide(); }, defaultOpts.interval);

  26. }; //endof go

  27. var itemMouseOver = function(target, items) {

  28. stop();

  29. var i = $.inArray(target, items);

  30. slide({ current: i });

  31. }; //endof itemMouseOver

  32. _titles.hover(function() { if($(this).attr('class')!='cur'){itemMouseOver(this, _titles); }else{stop();}}, go);

  33. //_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);

  34. _bodies.hover(stop, go);

  35. //trigger the slidebox

  36. go();

CSS
根據具體的情況修改css的代碼,使寬和高符合所需地方的要求
.slides {
OVERFLOW: hidden; WIDTH: 324px; POSITION: relative; HEIGHT: 225px
}
.slide-pic {
OVERFLOW: hidden; WIDTH: 325px
}
.slide-picIMG {
BORDER-RIGHT: #e4e4e41pxsolid; BORDER-TOP: #e4e4e41pxsolid; BORDER-LEFT: #e4e4e41pxsolid; WIDTH: 323px; BORDER-BOTTOM: #e4e4e41pxsolid; HEIGHT: 225px
}
.slide-picLI {
DISPLAY: none
}
.slide-picLI.cur {
DISPLAY: block
}
.slide-li {
LEFT: 0px; BOTTOM: 0px; POSITION: absolute
}
.slide-liLI {
FLOAT: left; WIDTH: 63px; LINE-HEIGHT: 30px; MARGIN-RIGHT: 1px; HEIGHT: 30px; TEXT-ALIGN: center
}
.slide-liA {
DISPLAY: block; FONT-SIZE: 14px; WIDTH: 62px; COLOR: #fff; HEIGHT: 30px
}
.slide-li.curA {
COLOR: #333; TEXT-DECORATION: none
}
.slide-liA:hover {
COLOR: #333; TEXT-DECORATION: none
}
.opLI {
BACKGROUND: #666; FILTER: alpha(opacity=60); opacity: 0.6
}
.opLI.cur {
BACKGROUND: #fff
}
.slide-txtSPAN {
DISPLAY: none
}

MSP(Microsoft Student Partners)是微軟公司針對高校

大學生在全球範圍內所設立的項目。旨在鼓勵那些在校園裏積極倡導、推動創新實踐,

樂於積極幫助他人的優秀學生,給他們提供微軟最前沿的技術資源,以及更廣泛的交流、展示自我的平臺。   

MSP項目面向所有熱愛技術、勇於創新、積極推動創新實踐、願意和他人分享自己所學的在校大學生,並不僅僅侷限於技術類背景的學生。

如果你喜歡的話,歡迎加入。地址

http://msdn.microsoft.com/zh-cn/jj889435.aspx

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章