<!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.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
jQuery带音效旋转式动画切换幻灯片特效.zip (15个子文件)
js
jquery.rotatingSlideshow.js 9KB
jquery-2.1.1.min.js 82KB
css
jquery.rotatingSlideshow.css 3KB
index.html 3KB
images
slide2.jpg 65KB
button.png 70KB
slide1.jpg 60KB
slide4.jpg 63KB
slide3.jpg 83KB
slides-overlay.jpg 80KB
originals
img2.jpg 82KB
img4.jpg 80KB
img1.jpg 79KB
img3.jpg 112KB
sound
sound.mp3 11KB
共 15 条
- 1
资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5852
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功