此代码参考网上修改的,上面要收费,我花了一小时整理修改的。。。还算节约了一瓶可乐钱。。。
下面附上代码和源码。。。
效果图
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(下载地址
)
分享到:
相关推荐
很好的幻灯效果,仿趣玩网五屏带标题的jQuery幻灯效果.希望对各位的网页美化有帮助
jquery图片幻灯效果jquery图片幻灯效果jquery图片幻灯效果jquery图片幻灯效果jquery图片幻灯效果jquery图片幻灯效果
仿UC浏览器官方网站全屏jQuery幻灯片
基于jquery的五屏轮播首页幻灯片特效代码,支持幻灯图标题显示,以淡入淡出效果切换。代码简单实用。推荐!
七屏带标题简要的jQuery插件幻灯广告效果
jQuery带标题描述背景幻灯片代码
仿迅雷影音官网的全屏大图jQuery幻灯片代码
jQuery途牛首页定时幻灯片轮播效果
仿新浪游戏首页带简介和缩略图的jQuery幻灯片
jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换
五种切换效果的jQuery幻灯片是一款基于jquery css3实现图片切换特效,总共有5种不同的切换效果,爆炸效果,翻转效果,扭曲效果,立方体效果,翻页效果。
jquery 幻灯片 大全jquery 幻灯片 大全
Jquery触屏幻灯片,自己写的附有js和css源代码。下载后可自行修改。
纯jquery幻灯效果,自动切换,不限数量,无flash插件
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果,免费送你们
jquery幻灯片切换过度效果
jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览 jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览 jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览
该特效一款jQuery仿途牛官方网站的全屏幻灯片焦点图代码特效,带左右箭头跟索引图标切换,是一款非常简单方便实用的网站大图轮播js图片插件。
Wavescroll是一款基于GSAP的响应式全屏背景图片jQuery幻灯片插件。该幻灯片插件支持鼠标拖动、鼠标滚动和移动触摸事件,可以制作出炫酷的波浪滚动切换效果。