仿趣玩网五屏带标题的jQuery幻灯效果分享-优快云博客

本文分享了如何改进轮播图实现，节省成本并提高用户体验。通过使用HTML、CSS和JavaScript，实现了一个高效的轮播图功能，包括图片切换、链接跳转及样式调整。代码示例包括HTML结构、CSS样式和jQuery脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此代码参考网上修改的，上面要收费，我花了一小时整理修改的。。。还算节约了一瓶可乐钱。。。

下面附上代码和源码。。。

效果图

1.页面

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<link href='slides.css' media='all' type='text/css' rel='stylesheet'>
<script type='text/javascript' src='jquery.js'></script>
<title></title>
</head>
<body>
<div class='slides'>
     <ul class='slide-pic'>
         <li class='' style='display: none;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='童款卫衣￥89选2' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li>
         <li class='' style='display: none;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='SPORTICA特惠159元' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li>
         <li class='' style='display: none;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='RAMPAGE新品79元起' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li>
         <li class='' style='display: none;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='佐丹奴冬装劲爆价' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li>
         <li class='cur' style='display: list-item;'><a target='_blank' href='http://djangoer.iteye.com'><img alt='性感女郎全场低至4折' src='http://www.iteye.com/upload/logo/user/575657/15805bbe-9b2b-389d-9c9c-935690c51b5e.jpg?1319469667'></a></li>
     </ul>
     <ul class='slide-li op'>
		<li class=''></li>
		<li class=''></li>
		<li class=''></li>
		<li class=''></li>
		<li class='cur'></li>
     </ul>
     <ul class='slide-li slide-txt'>
       <li class=''><a target='_blank' href='http://djangoer.iteye.com'>童款卫衣￥89选2</a></li>
       <li class=''><a target='_blank' href='http://djangoer.iteye.com'>SPORTICA特惠159元</a></li>
       <li class=''><a target='_blank' href='http://djangoer.iteye.com'>RAMPAGE新品79元起</a></li>
       <li class=''><a target='_blank' href='http://djangoer.iteye.com'>佐丹奴冬装劲爆价</a></li>
       <li class='cur'><a target='_blank' href='http://djangoer.iteye.com'>性感女郎全场低至4折</a></li>
     </ul>
</div>
</body>
<script type='text/javascript'>
if($('.slide-pic').length>0)
{
	var defaultOpts = { interval: 5000, fadeInTime: 300, fadeOutTime: 200 };
	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');
	}; 
	var go = function() {
		stop();
		_intervalID = window.setInterval(function() { slide(); }, defaultOpts.interval);
	}; 
	var itemMouseOver = function(target, items) {
		stop();
		var i = $.inArray(target, items);
		slide({ current: i });
	}; 
	_titles.hover(function() { if($(this).attr('class')!='cur'){itemMouseOver(this, _titles); }else{stop();}}, go);
	_bodies.hover(stop, go);
	go();
}
</script>
</html>

2.css文件

@CHARSET "UTF-8";
.slides {
    overflow: hidden;
    position: relative;
    height: 380px;
    width: 690px;
}
.slides * {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.slides ul {
    list-style-type: none;
}
.slides li {
    list-style-type: none;
}
.slides a img, *:link img, *:visited img {
    border: 0 none;
}
.slides a:link {
    color: #000000;
    text-decoration: none;
}
.slides a:visited {
    color: #000000;
    text-decoration: none;
}
.slides a:hover {
    color: #000000;
    text-decoration: underline;
}
.slides .slide-pic {
    overflow: hidden;
    width: 690px;
}
.slides .slide-pic img {
    height: 380px;
    width: 690px;
}
.slides .slide-pic li {
    display: none;
}
.slides .slide-pic li.cur {
    display: block;
}
.slides .slide-li {
    bottom: 0;
    left: 0;
    position: absolute;
}
.slides .slide-li li {
    float: left;
    height: 30px;
    line-height: 30px;
    margin-right: 1px;
    text-align: center;
    width: 137px;
}
.slides .slide-li a {
    color: #FFFFFF;
    display: block;
    font-size: 14px;
    height: 30px;
    width: 137px;
}
.slides .slide-li a, .slide-li a:link, .slide-li a:visited {
    color: #FFFFFF;
}
.slides .slide-li .cur a, .slide-li a:hover {
    color: #333333;
    text-decoration: none;
}
.slides .op li {
    background: none repeat scroll 0 0 #666666;
    opacity: 0.6;
}
.slides .op li.cur {
    background: none repeat scroll 0 0 #FFFFFF;
}
.slides .slide-txt span {
    display: none;
}

3.jquery（下载地址）