Skip to content

Instantly share code, notes, and snippets.

@lolocoo

lolocoo/car_slider.html

Created January 11, 2018 07:49
Show Gist options
  • Save lolocoo/ff15085bab4037cf2944db16fcac3d51 to your computer and use it in GitHub Desktop.
Save lolocoo/ff15085bab4037cf2944db16fcac3d51 to your computer and use it in GitHub Desktop.
Download ZIP
car_slider.html
Raw
car_slider.html
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2018 by anonymous (http://jsbin.com/kibowalije/1/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
#kr-thumbnail-previewer {
/* height: 337px; */
overflow: hidden;
}
#kr-thumbnail-previewer > img {
float: left;
}
#kr-thumbnail-previewer > ul {
float: left;
height: 337px;
overflow: auto;
margin-left: 10px;
}
#kr-thumbnail-previewer > ul li.highlight {
border: 2px solid blue;
}
#kr-thumbnail-previewer #previewerTitle {
clear: both;
}
#kr-thumbnail-previewer #counter {
clear: both;
text-align: center;
}
</style>
</head>
<body>
<div id="kr-thumbnail-previewer">
</div>
<br />
<p>
<button id="add" class="btn btn-primary">添加</button>
<button id="remove" class="btn btn-danger">删除</button>
</p>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script id="jsbin-javascript">
function Previewer (options) {
this.data = options.data;
this.$elem = $(options.elem);
this.opts = options;
this.index = 0;
this.t = null;
this.init();
}
Previewer.prototype = {
constructor: this,
setIndex (index) {
this.thumbnailScroll(index, this.index);
this.index = index < 0 ? 0 : (index > this.data.length -1 ? this.data.length -1 : index);
this.setCounter();
this.setTitle();
},
setCounter () {
this.$counter.html(this.index + 1 + '/' + this.data.length);
},
setTitle () {
this.$title.html(this.data[this.index].title)
},
build () {
let str = `<img id="previewer" src="${this.data[this.index].url}" width="450"><ul id="thumbnails">` + this.data.map((item, index) => `<li><img src="${item.url}" data-index="${index}" width="120" /></li>`).join('') + `</ul><div id="previewerTitle">${this.data[this.index].title}</div><div id="counter">${this.index+1} / ${this.data.length}</div>`;
this.$elem.append(str);
},
previewerChange (url) {
this.$previewer.attr('src', url);
},
previewerClick () {
this.$previewer.on('click', e => {
if (this.t) clearTimeout(this.t);
this.t = setTimeout(() => {
let action = e.offsetX > e.target.width / 2 ? 1 : -1;
this.setIndex(this.index + action)
this.previewerChange(this.data[this.index].url)
}, 100);
})
this.$previewer.on('mousemove', e => {
let action = e.offsetX > e.target.width / 2 ? 1 : -1;
if (action == 1) {
this.$previewer.css({
cursor: 'url("http://static.qcdqcdn.com/img/right.ico"), pointer'
})
} else {
this.$previewer.css({
cursor: 'url("http://static.qcdqcdn.com/img/left.ico"), pointer'
})
}
})
},
thumbnailScroll (next, prev) {
console.log('pre ' + prev)
console.log('next ' + next)
let $thumbs = this.$thumbnails.find('li').removeClass('highlight');
let $thumb = $thumbs.find('img').eq(this.index).parent().addClass('highlight');
if (next > prev) {
if (this.$thumbnails.height() > $thumb.offset().top) {
this.$thumbnails.scrollTop(this.$thumbnails.scrollTop() + 90);
}
console.log()
return false;
}
//$thumb[0].scrollIntoView();
},
thumbnailClick () {
this.$thumbnails.on('click', 'img', (e) => {
this.previewerChange(e.target.src);
this.setIndex($(e.target).data('index'));
});
},
thumbnailRebuild () {
let str = this.data.map((item, index) => `<li><img src="${item.url}" data-index="${index}" width="120" /></li>`).join('');
this.$thumbnails.html(str);
this.thumbnailScroll();
this.setCounter();
},
add (item) {
this.data.push(item);
this.thumbnailRebuild();
},
remove(index) {
this.index = 0;
this.data.splice(index, 1);
this.thumbnailRebuild();
},
init () {
this.build();
this.$previewer = $('#previewer');
this.$thumbnails = $('#thumbnails');
this.$title = $('#previewerTitle')
this.$counter = $('#counter');
this.previewerClick();
this.thumbnailClick();
}
}
let previewer = new Previewer({
elem: '#kr-thumbnail-previewer',
data: [
{
title: 'pic name placeholder 1',
url: 'https://car3.autoimg.cn/cardfs/product/g19/M0F/22/46/1024x0_1_q87_autohomecar__wKgFU1pSBN2AbRznAAeZ3vfXDKk886.jpg'
},
{
title: 'pic name placeholder 2',
url: 'https://car2.autoimg.cn/cardfs/product/g19/M10/24/B0/1024x0_1_q87_autohomecar__wKjBxFpSBNyAMZh0AAbpAdgx5iI404.jpg'
},
{
title: 'pic name placeholder 3',
url: 'https://car2.autoimg.cn/cardfs/product/g19/M0F/24/B0/1024x0_1_q87_autohomecar__wKjBxFpSBNuAM7g-AAcsvd7xxU4191.jpg'
},
{
title: 'pic name placeholder 4',
url: 'https://car2.autoimg.cn/cardfs/product/g19/M0B/29/0E/1024x0_1_q87_autohomecar__wKgFWFpSBNqAMn-SAAcCi1mm5po213.jpg'
},
{
title: 'pic name placeholder 5',
url: 'https://car3.autoimg.cn/cardfs/product/g19/M0B/22/46/1024x0_1_q87_autohomecar__wKgFU1pSBNmAeU6JAAbEMc8p85s846.jpg'
},
{
title: 'pic name placeholder 6',
url: 'https://car3.autoimg.cn/cardfs/product/g19/M05/29/0D/1024x0_1_q87_autohomecar__wKgFWFpSBNiAAXjbAAeNcgBK6kg538.jpg'
},
{
title: 'pic name placeholder 7',
url: 'https://car3.autoimg.cn/cardfs/product/g19/M02/22/46/1024x0_1_q87_autohomecar__wKgFU1pSBNeAKAJRAAWyWrkqikw719.jpg'
}
]
});
$('#add').on('click', ()=>{
previewer.add({
title: 'add pic title',
url: 'https://car2.autoimg.cn/cardfs/product/g17/M0D/45/8F/1024x0_1_q87_autohomecar__wKgH2FpSBHWAG8VRAAg9BZj9Eu0340.jpg'
})
})
$('#remove').on('click', ()=>{
var index = Math.ceil(Math.random()*previewer.data.length)
previewer.remove(index)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment