jQuery透明度変化マルチキャスト効果を実現
19719 ワード
急いで透明度の変化の輪番効果を書いて、間違いを指摘することを歓迎して、感謝します!!!
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery title>
<script type="text/javascript" src="../bootstrap-3.3.7/js/jquery2.0.js">script>
<style>
* {
font-family: ;
}
.container {
width: 1140px;
padding: 0 15px;
margin: 0 auto;
}
#zz_carousel {
width: 1140px;
height: 500px;
overflow: hidden;
position: relative;
}
#zz_carousel:hover .arrow {
display: block;
}
#zz_carousel .paging {
position: absolute;
bottom: 15px;
left: 50%;
}
#zz_carousel .paging span {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #eee;
margin-left: 15px;
cursor: pointer;
}
#zz_carousel .paging span.active {
background-color: darkslategrey;
}
#zz_carousel .image_reel {
position: absolute;
}
#zz_carousel .image_reel img {
width: 1140px;
height: 500px;
display: none;
}
#zz_carousel .image_reel img:first-child{
display: block;
}
#zz_carousel .next {
position: absolute;
top: 50%;
margin-top: -50px;
right: 0;
}
#zz_carousel .previous {
position: absolute;
top: 50%;
margin-top: -50px;
left: 0;
}
a {
text-decoration: none;
color: #fff;
}
#zz_carousel .arrow {
font-size: 50px;
display: none;
}
#zz_carousel .arrow:hover {
background-color: #f0f3ef;
color: #091b22;
}
style>
head>
<body>
<div class="container">
<div class="carousel" id="zz_carousel">
<div class="image_reel">
<a href="#"><img src="images/1.jpg" alt="">a>
<a href="#"><img src="images/2.jpg" alt="">a>
<a href="#"><img src="images/3.jpg" alt="">a>
<a href="#"><img src="images/4.jpg" alt="">a>
<a href="#"><img src="images/5.jpg" alt="">a>
div>
<div class="paging">div>
<div class="change">
<sapn class="previous"><a href="#" class="arrow"><a>sapn>
<span class="next"><a href="#" class="arrow">>a>span>
div>
div>
div>
<script>
$(function () {
//1.
var $zz_carousel = $('#zz_carousel');
var $imgs = $zz_carousel.find('.image_reel img');
var $paging = $zz_carousel.find('.paging');
var $previous =$zz_carousel.find('.previous');
var $next =$zz_carousel.find('.next');
//2.
var picIdx = 0;
$imgs.each(function (index) {
var $span = $('');
$span.idx = index;
$span.appendTo($paging);
$span.click(function () {
$(this).addClass('active').siblings().removeClass('active');
picIdx = $span.idx;
$imgs.eq(picIdx).stop().fadeIn();
$imgs.not($imgs.eq(picIdx)).fadeOut();
});
});
// paging margin-left
$paging.children().eq(0).addClass('active');
$paging.css({
marginLeft : -($paging.outerWidth() / 2)
});
//3.
$previous.click(function () {
if(picIdx == 0){
picIdx = $imgs.length ;
}
picIdx --;
$imgs.eq(picIdx).stop().fadeIn();
$imgs.not($imgs.eq(picIdx)).fadeOut();
$paging.children().eq(picIdx).addClass('active');
$paging.children().not($paging.children().eq(picIdx)).removeClass('active');
});
$next.click(function () {
if(picIdx == $imgs.length - 1){
picIdx = -1;
}
picIdx ++;
$imgs.eq(picIdx).stop().fadeIn();
$imgs.not($imgs.eq(picIdx)).fadeOut();
$paging.children().eq(picIdx).addClass('active');
$paging.children().not($paging.children().eq(picIdx)).removeClass('active');
});
//4.
var timer = setInterval(function () {
$next.trigger('click');
},3000);
$zz_carousel.hover(function () {
clearInterval(timer);
},function () {
clearInterval(timer);
timer = setInterval(function () {
$next.trigger('click');
},3000);
})
});
script>
body>
html>