整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖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小時內與您取得聯系。
