<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带音效旋转式切换幻灯片 - 网页模板</title>
<link href="css/jquery.rotatingSlideshow.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="rotating-slideshow">
<div id="slider-main" data-position="1" data-deg="0">
<div id="slider-btns" class="button">
<a id="pos1" href="#" class="pos1" data-position="1"></a>
<a id="pos2" href="#" class="pos2" data-position="4"></a>
<a id="pos3" href="#" class="pos3" data-position="3"></a>
<a id="pos4" href="#" class="pos4" data-position="2"></a>
</div>
<div class="slider-overlay">
<div class="active" data-position="1">
<h3>Different</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
<div data-position="2">
<h3>Creative</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
<div data-position="3">
<h3>Fancy</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
<div data-position="4">
<h3>Solutions</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
</div>
<div class="slides">
<img class="active" src="images/slide1.jpg" data-position="1">
<img src="images/slide4.jpg" data-position="2">
<img src="images/slide3.jpg" data-position="3">
<img src="images/slide2.jpg" data-position="4">
</div>
<img class="spinner-btn" src="images/button.png" alt="">
<img class="spinner" src="images/slides-overlay.jpg" alt="">
</div>
<audio id="slider-sound" preload="auto">
<source src="sound/sound.mp3">
你的浏览器不支持HTML5 AUDIO元素。
</audio>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.rotatingSlideshow.js"></script>
<script>
$(document).ready(function(){
$('.rotating-slideshow').rotatingSlideshow({
sliderHolder: '#slider-main',
btnsHolder: '#slider-btns',
audioHolder: '#slider-sound',
auto: true,
autoSpeed: '6000'
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery带音效旋转式切换幻灯片.zip
版权申诉
152 浏览量
2022-11-20
22:07:55
上传
评论
收藏 762KB ZIP 举报
jQuery带音效旋转式切换幻灯片.zip （16个子文件） 
jQuery带音效旋转式切换幻灯片 
jQuery带音效旋转式切换幻灯片.jpg 44KB jiaoben4287 css 
jquery.rotatingSlideshow.css 3KB images slides-overlay.jpg 80KB slide1.jpg 60KB slide4.jpg 63KB originals img1.jpg 79KB img2.jpg 82KB img4.jpg 80KB img3.jpg 112KB slide3.jpg 83KB slide2.jpg 65KB
button.png 70KB sound sound.mp3 11KB
index.html 3KB js jquery.rotatingSlideshow.js 9KB jquery-2.1.1.min.js 82KB资源评论
