HTML
首先html中的<head>中使用了jquery的类库
<scriptsrc="js/jquery-1.4.2.min.js"type="text/javascript"></script>
<divclass="slides"name="__DT"> <ulclass="slide-pic"> <li><ahref="#"><imgalt="ceshi"src="images/201232615333991535.jpg"></a> <liclass="cur"><ahref="#"><imgalt="ceshi"src="images/201232615333991535.jpg"></a> <li><ahref="#"><imgalt="ceshi"src="images/201232615333991535.jpg"></a> <li><ahref="#"><imgalt="ceshi"src="images/201232615333991535.jpg"></a> <li><ahref="#"><imgalt="ceshi"src="images/201232615333991535.jpg"></a></li> </ul> <ulclass="slide-li op"> <liclass="cur"></li> <li></li> <li></li> <li></li> <li></li> </ul> <ulclass="slide-li slide-txt"> <liclass="cur"><ahref="#">ceshi</a></li> <li><ahref="#">ceshi</a></li> <li><ahref="#">ceshi</a></li> <li><ahref="#">ceshi</a></li> <li><ahref="#">ceshi</a></li> </ul> </div>
JS
注意cur这个class的使用，不要么每个<li>都加上class="cur"而是应该让js来实现它的变换在最后引用了js文件，注意文件要放在<body>标签里，为了更快的加载，最好把js文件放到body的末尾
<scriptsrc="js/hp1.js"type="text/javascript"></script>
文件的具体内容
var defaultOpts = { interval: 5000, fadeInTime: 300, fadeOutTime: 200 };
//Iterate over the current set of matched elements
var _titles = $("ul.slide-txt li");
var _titles_bg = $("ul.op li");
var _bodies = $("ul.slide-pic li");
var _count = _titles.length;
var _current = 0;
var _intervalID = null;
var stop = function() { window.clearInterval(_intervalID); };
var slide = function(opts) {
if (opts) {
_current = opts.current || 0;
} else {
_current = (_current >= (_count - 1)) ? 0 : (++_current);
};
_bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function() {
_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
_bodies.removeClass("cur").eq(_current).addClass("cur");
});
_titles.removeClass("cur").eq(_current).addClass("cur");
_titles_bg.removeClass("cur").eq(_current).addClass("cur");
}; //endof slide
var go = function() {
stop();
_intervalID = window.setInterval(function() { slide(); }, defaultOpts.interval);
}; //endof go
var itemMouseOver = function(target, items) {
stop();
var i = $.inArray(target, items);
slide({ current: i });
}; //endof itemMouseOver
_titles.hover(function() { if($(this).attr('class')!='cur'){itemMouseOver(this, _titles); }else{stop();}}, go);
//_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);
_bodies.hover(stop, go);
//trigger the slidebox
go();
CSS
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索function
， var
， 渐入轮显
， current
slidebox
jquery实现显示隐藏、jquery实现全屏显示、jquery类库、jquery类库下载、jquery类库文件，以便于您获取更多的相关知识。
时间： 2024-11-30 13:20:12