分享一款图片导航效果 - Animated Slideshow Navigation
2012-04-24 09:20
211 查看
<!doctype html>
<html lang="en">
<head>
<title>Fancy Slideshow Navigation Using jQuery (demo)</title>
<style type="text/css">
#slideshow {
width: 900px;
height: 500px;
overflow: hidden;
position: relative;
margin: 0 auto;
top: 20px;
}
#slideshow-reel {
width: 5400px;
height: 450px;
position: absolute;
top: 0;
left: 0;
}
#slideshow-reel .slide {
width: 900px;
height: 450px;
float: left;
background-color: gray;
}
#slideshow-reel .slide:nth-child(2n+1) {
background-color: #333;
}
#slideshow-reel h1 {
margin: 25px 60px;
color: #FFF;
font-size: 3em;
text-shadow: 0 -1px 1px #333;
}
/* arrow navigation */
.slideshow-arrow {
display: block;
position: absolute;
top: 190px;
width: 0;
height: 0;
border-style: solid;
border-width: 28px 21px;
border-color: transparent;
outline: none;
}
.slideshow-arrow:hover {
opacity: .5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#slideshow-left {
left: 0;
border-right-color: #fff;
}
#slideshow-right {
right: 0;
border-left-color: #fff;
}
/* bottom navigation */
#slideshow-nav {
position: absolute;
left: 0;
bottom: 0;
width: 900px;
}
#slideshow-nav .nav-item {
float: left;
width: 150px;
padding: 11px 0;
outline: none;
}
#slideshow-nav .nav-item-line {
float: left;
width: 68px;
height: 1px;
line-height: 1px;
margin: 3px 0;
background-color: #bbb;
}
#slideshow-nav .nav-item-line-hidden {
background-color: transparent;
}
#slideshow-nav .nav-item-dot {
float: left;
width: 8px;
height: 8px;
margin: 0 3px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #ed1d27;
}
/* active nav dot */
#active-nav-item {
display: block;
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
margin-left: 60px;
background-color: #8e8d8b;
background-color: rgba(28, 27, 23, .5);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#active-nav-item .active-nav-item-inner {
display: inline-block;
width: 8px;
height: 8px;
margin: 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #000;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
min-height: 600px;
position: relative;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.slideshow-arrow,
#slideshow-nav .nav-item-line,
#slideshow-nav .nav-item-dot {
overflow: hidden;
}
.slideshow-arrow,
.slideshow-arrow:hover {
border-top-color: pink;
border-bottom-color: pink;
filter: chroma(color=pink);
}
#slideshow-left {
border-left-color: pink;
}
#slideshow-right {
border-right-color: pink;
}
</style>
<![endif]-->
</head>
<body>
<div id="slideshow">
<div id="slideshow-reel">
<div class="slide">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
<div class="slide">
<h1>Slide 5</h1>
</div>
<div class="slide">
<h1>Slide 6</h1>
</div>
</div>
<a href="#" id="slideshow-left" class="slideshow-arrow"></a>
<a href="#" id="slideshow-right" class="slideshow-arrow"></a>
<div id="slideshow-nav">
<a href="#" class="nav-item">
<span class="nav-item-line nav-item-line-hidden"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line nav-item-line-hidden"></span>
</a>
<span id="active-nav-item">
<span class="active-nav-item-inner"></span>
</span>
</div>
</div>
<p style="color: #999; margin: 30px 15px;text-align:center">More demo<a href="http://www.nfl-buy.com/nfl-jerseys-c-1" style="color: #999;">cheap nfl jerseys</a></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript">
$(function() {
function changeSlide( newSlide ) {
// cancel any timeout
clearTimeout( slideTimeout );
// change the currSlide value
currSlide = newSlide;
// make sure the currSlide value is not too low or high
if ( currSlide > maxSlide ) currSlide = 0;
else if ( currSlide < 0 ) currSlide = maxSlide;
// animate the slide reel
$slideReel.animate({
left : currSlide * -900
}, 400, 'swing', function() {
// hide / show the arrows depending on which frame it's on
if ( currSlide == 0 ) $slideLeftNav.hide();
else $slideLeftNav.show();
if ( currSlide == maxSlide ) $slideRightNav.hide();
else $slideRightNav.show();
// set new timeout if active
if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
});
// animate the navigation indicator
$activeNavItem.animate({
left : currSlide * 150
}, 400, 'swing');
}
function nextSlide() {
changeSlide( currSlide + 1 );
}
// define some variables / DOM references
var activeSlideshow = true,
currSlide = 0,
slideTimeout,
$slideshow = $('#slideshow'),
$slideReel = $slideshow.find('#slideshow-reel'),
maxSlide = $slideReel.children().length - 1,
$slideLeftNav = $slideshow.find('#slideshow-left'),
$slideRightNav = $slideshow.find('#slideshow-right'),
$activeNavItem = $slideshow.find('#active-nav-item');
// set navigation click events
// left arrow
$slideLeftNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide - 1 );
});
// right arrow
$slideRightNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide + 1 );
});
// main navigation
$slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( $(this).index() );
});
// start the animation
slideTimeout = setTimeout(nextSlide, 1200);
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3123668-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)
- 分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)
- wordpress图片灯箱和延迟加载最佳效果插件：Images Lazyload and Slideshow
- SlideShowView用viewpaper实现图片轮播效果
- 分享一款基于jqery的带3D切换效果的图片展示
- CSS3 animate实现图片墙3D翻转效果
- 分享21个基于jquery菜单导航的效果
- 【简报】一款超灵活的jQuery幻灯插件: Really Simple Slideshow
- 分享原生js代码实现图片放大境效果
- 第74天：jQuery实现图片导航效果
- js淡入淡出的图片轮播效果代码分享
- jquery实现LED广告牌旋转系统图片切换效果代码分享
- iOS7 设置背景图片或导航为毛玻璃效果
- jquery 动画函数animate/show/slideDown/fadeIn/toggle
- 分享10款效果惊艳的HTML5图片特效
- 分享30个非常精美的jQuery Lightbox图片效果插件
- 分享购物网站中常用的一款放大镜效果(产品细节展示)
- 实现仿简书选取内容生成分享图片效果
- 分享一个用原生JavaScript写的带缓动效果的图片幻灯
- 安卓自定义View——PictureGuide一款不错的图片导航，可实现图片显示滑动到哪一张