<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动滚动的jQuery幻灯片代码</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<h1>First Slide</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<p><a href="http://www.codefans.net/" class="link">Check out the fourth slide ›</a></p>
</div>
<div class="slide">
<h1>Second Slide</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<p><a href="http://www.codefans.net/" class="link">Check out the fifth slide ›</a></p>
</div>
<div class="slide">
<h1>Third Slide</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<p><a href="http://www.codefans.net/" class="link">Check out the first slide ›</a></p>
</div>
<div class="slide">
<h1>Fourth Slide</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<p><a href="http://www.codefans.net/" class="link">Check out the sixth slide ›</a></p>
</div>
<div class="slide">
<h1>Fifth Slide</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<p><a href="http://www.codefans.net/" class="link">Check out the seventh slide ›</a></p>
</div>
<div class="slide">
<h1>Sixth Slide</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<p><a href="http://www.codefans.net/" class="link">Check out the first slide ›</a></p>
</div>
<div class="slide">
<h1>Seventh Slide</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<p><a href="http://www.codefans.net/" class="link">Check out the third slide ›</a></p>
</div>
</div>
<a href="http://www.codefans.net/" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="http://www.codefans.net/" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
<div id="footer">
<p>自动滚动的jQuery幻灯片代码，可左右翻页，并有导航按钮，压缩包另附链接、产品、仅图片3种样式。</p>
<p></p>
</div>
</div>
</body>
</html>
基于jquery的文字滚动版的幻灯切换效果.zip
版权申诉
162 浏览量
2022-11-10
00:25:46
上传
评论
收藏 98KB ZIP 举报
基于jquery的文字滚动版的幻灯切换效果.zip （11个子文件） 
132677881526609908 likecs.com_132677881535678596 jquerytxtscroll css 
global.css 2KB img 
arrow-next.png 2KB pagination.png 724B background.png 12KB arrow-prev.png 2KB example-frame.png 33KB new-ribbon.png 9KB
loading.gif 7KB
index.html 6KB js jquery-1.4.4.min.js 77KB slides.min.jquery.js 8KB资源评论
