Skip to content

Instantly share code, notes, and snippets.

@13hoop

13hoop/.html

Created April 9, 2017 16:37
Show Gist options
  • Save 13hoop/0e4cd0d4967056265d6097072e67e9d7 to your computer and use it in GitHub Desktop.
Save 13hoop/0e4cd0d4967056265d6097072e67e9d7 to your computer and use it in GitHub Desktop.
Download ZIP
slideDome_ fadeout/in
Raw
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变轮播DEMO</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
ul,a,li {
margin:0;
padding: 0;
text-decoration: none;
list-style: none;
}
.clearFix {
content: '';
display: block;
clear: both;
}
.viewFrame {
position: relative;
width: 600px;
height: 338px;
margin: 0 auto;
overflow: hidden;
}
.wrapAll {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2400px;
}
.wrapAll > li {
float: left;
}
.wrapAll > li > .cell {
display: block;
}
.wrapAll > li img{
width: 600px;
}
.btn {
position: absolute;
display: block;
width: 50px;
height: 50px;
background: #a6a7a8;
top: 50%;
transform: translateY(-50%);
border-radius: 25px;
text-align: center;
line-height: 50px;
color: whitesmoke;
}
.btn-pre {
float: left;
left: 0px;
}
.btn-next {
float: right;
right: 0px;
}
.indicator {
position: absolute;
bottom: 10px;
width: 500px;
left: 50%;
transform: translateX(-50%);
}
.indicator li {
display: inline-block;
margin: 5px;
/*background: #c4c4c4;*/
/*width: 100px;*/
}
.indicator li .indicatorcell {
opacity: 0.5;
border: 2px solid white;
width: 100px;
}
.indicator li .indicatorcell.selected {
opacity:1;
border: 2px solid #cc5500;
}
</style>
</head>
<body>
<div class="viewFrame">
<ul class="wrapAll clearFix">
<li><a href="" class="cell"><img src="http://alioss.g-cores.com/uploads/volume/af9f570d-5eb3-46e8-af81-9e05b38036e2_hl.jpg"></a></li>
<li><a href="" class="cell"><img src="http://alioss.g-cores.com/uploads/volume/4edf3177-452b-4924-b382-2c02c821b596_hl.jpg"></a></li>
<li><a href="" class="cell"><img src="http://alioss.g-cores.com/uploads/volume/9c913508-971e-42d7-8959-e9471e7ddca0_hl.jpg"></a></li>
<li><a href="" class="cell"><img src="http://alioss.g-cores.com/uploads/volume/c9d5acba-15a8-4e2d-9de0-f723ccbcbd76_hl.jpg"></a></li>
</ul>
<a href="" class="btn btn-pre"><</a>
<a href="" class="btn btn-next">></a>
<ul class="indicator clearFix">
<li><img class="indicatorcell selected" src="http://alioss.g-cores.com/uploads/volume/af9f570d-5eb3-46e8-af81-9e05b38036e2_hl.jpg"></li>
<li><img class="indicatorcell" src="http://alioss.g-cores.com/uploads/volume/4edf3177-452b-4924-b382-2c02c821b596_hl.jpg"></li>
<li><img class="indicatorcell" src="http://alioss.g-cores.com/uploads/volume/9c913508-971e-42d7-8959-e9471e7ddca0_hl.jpg"></li>
<li><img class="indicatorcell" src="http://alioss.g-cores.com/uploads/volume/c9d5acba-15a8-4e2d-9de0-f723ccbcbd76_hl.jpg"></li>
</ul>
</div>
<script>
var $viewFrame = $('.viewFrame')
var $btn_pre = $viewFrame.find('.btn-pre')
var $btn_next = $viewFrame.find('.btn-next')
// width = 600
var $wrapAll = $viewFrame.find('.wrapAll')
var $indicator = $viewFrame.find('.indicator')
var currentPage = 0
$btn_next.on('click', function (e) {
e.preventDefault()
play(++currentPage)
})
$btn_pre.on('click', function (e) {
e.preventDefault()
play(--currentPage)
})
var $cells = $wrapAll.find('.cell')
var play = function (n) {
currentPage = n
if(n > $cells.length-1) {
currentPage = 0
}
if(n < 0) {
currentPage = $cells.length-1
}
console.log('n : ' + n + ' cp- ' + currentPage)
$wrapAll.fadeTo('slow', 0.2, function () {
$wrapAll.css({
"left": (-1) * 600 * currentPage + "px",
"opacity" : "1"
})
$indicator.children().eq(currentPage).find('.indicatorcell').addClass('selected').closest('li').siblings().find('.selected').removeClass('selected')
})
}
$indicator.on('click', 'li', function (e) {
play($(e.currentTarget).index())
$(e.currentTarget).find('.indicatorcell').addClass('selected').closest('li').siblings().find('.selected').removeClass('selected')
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment