整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
图1
特效非常炫酷，可以用于制造音乐播放切换或视频播放切换前端（图2）
图2
图3
就爱UI - 分享UI设计的点点滴滴
SS3动画原理实现轮播图，主要用到CSS3的动画过渡实现切换，感兴趣的小伙伴可以看看！
效果图：
实现代码
html:
css:
<!DOCTYPE html>
<html>
<head>
<title>轮播图制作</title>
<style type="text/css">
.imgContainer {
width: 1000px;
height: 400px;
border: 1px solid #ccc;
margin: 0 auto;
}
.imgContainer .imgs img {
width: 1000px;
height: 400px;
}
.imgContainer .imgsBtn {
width: 112px;
height: 32px;
margin: 0 auto;
position: relative;
top: -38px;
text-align: center;
z-index: 5;
}
.imgContainer .imgsBtn span {
display: block;
float: left;
width:20px;
height: 20px;
line-height: 20px;
font-size: 13px;
margin: 3px;
border-radius: 50%;
}
.imgsBtnOne {
background-color: #ccc;
color: #222;
opacity: 0.8;
}
.imgsBtnTwo {
background-color: red;
color: #fff;
opacity: 0.8;
}
.imgContainer .imgsBtn span:hover {
cursor: pointer;
}
</style>
<script type="text/javascript">
var count = 1; //图片起始序号
var speed = 3000;//图片轮播速度
var ti = window.setInterval(changeImg,speed);//调用函数，使图片实现轮播
var spans; //包含数字的span
var imgs; //包含图片的div
var img; //图片标签
window.onload = function() {
init(); //获取包含数字的span，进行初始化
clickJumpImg();
}
//初始化
function init() {
imgs = document.getElementById("carouselImg"); //获取图片所在的div
img = imgs.firstElementChild; //获取图片标签
//获取包含数字的span的集合
spans = document.getElementById("spans").getElementsByTagName("span");
}
//切换图片和数字样式
function changeImg() {
img.src = "img/" + count + "a.jpg"; //设置图片路径
//使数字改变样式
for (var i = 0; i < spans.length; i++) { //第i个span对应第i+1张图片
//因为图片数字是从1开始，二span集合的下标从0开始
if (spans[i].innerHTML == count) {
spans[i].className = "imgsBtnTwo";
}else {
spans[i].className = "imgsBtnOne";
}
}
count++;
if (count>4) { //到最后一张图片后，设置下一张图片为第一张
count = 1;
}
}
//鼠标移入数字时，切换到对应图片
function clickJumpImg() {
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
count = this.innerHTML;
//设置显示图片后，立即执行一次changeImg()函数，否则图片会延迟speed秒才出现
changeImg();
}
}
}
</script>
</head>
<body>
<div class="imgContainer">
<div id="carouselImg" class="imgs">
<img src="img/1a.jpg">
</div>
<div id="spans" class="imgsBtn">
<span class="imgsBtnTwo">1</span>
<span class="imgsBtnOne">2</span>
<span class="imgsBtnOne">3</span>
<span class="imgsBtnOne">4</span>
</div>
</div>
</body>
</html>*请认真填写需求信息，我们会在24小时内与您取得联系。
