JSFiddle - React, Tailwind, and code Playground
by tu genhua
HTML
<h2>我是横向滚动demo,序号我自己定义，不需要自动生成</h2>
<div id="slide_x" class="slide_x">
<ul class="list">
<li>
<a href="#1">
<img src="http://m1.img.srcdd.com/farm4/d/2014/0629/22/CD5E9B8DBBDE1B6B0C0C4CB912BE1898_B500_900_500_233.jpeg" width="600" height="280">
</a>
<p>焦点图说明文字 111</p>
</li>
<li>
<a href="#2">
<img src="http://m2.img.srcdd.com/farm5/d/2014/0629/22/C401548F532E4CBE8CFF3FC0B77810A6_B500_900_500_233.jpeg" width="600" height="280">
</a>
<p>焦点图说明文字 222</p>
</li>
<li>
<a href="#3">
<img src="http://m3.img.srcdd.com/farm5/d/2014/0629/22/13E9DA640C75EFB7F74772393DE55C35_B500_900_500_233.jpeg" width="600" height="280">
</a>
<p>焦点图说明文字 333</p>
</li>
<li>
<a href="#4">
<img src="http://m2.img.srcdd.com/farm5/d/2014/0629/22/C03D6BE10370B9FCF46974E86F47E3BF_B500_900_500_233.jpeg" width="600" height="280">
</a>
<p>焦点图说明文字 444</p>
</li>
<li>
<a href="#5">
<img src="http://m3.img.srcdd.com/farm4/d/2014/0629/22/F89C963D02F12EF0E72682293698F44F_B500_900_500_233.jpeg" width="600" height="280">
</a>
<p>焦点图说明文字 555</p>
</li>
</ul>
<ul class="ks-switchable-nav">
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<div class="prev"></div>
<div class="next"></div>
</div>
<h2>我是纵向滚动demo</h2>
<div id="slide_y" class="slide_y">
<ul class="list">
<li>
<a href="#1">
<img src="http://m1.img.srcdd.com/farm4/d/2014/0629/22/CD5E9B8DBBDE1B6B0C0C4CB912BE1898_B500_900_500_233.jpeg" width="600" height="280">
</a>
<p>焦点图说明文字 111</p>
</li>
<li>
<a href="#2">
<img src="http://m2.img.srcdd.com/farm5/d/2014/0629/22/C401548F532E4CBE8CFF3FC0B77810A6_B500_900_500_233.jpeg" width="600" height="280">
</a>
<p>焦点图说明文字 222</p>
</li>
<li>
<a href="#3">
<img src="http://m3.img.srcdd.com/farm5/d/2014/0629/22/13E9DA640C75EFB7F74772393DE55C35_B500_900_500_233.jpeg" width="600"...CSS
/* 焦点图 水平滚动 */
* {margin:0;padding:0;}
ul,li{list-style:none;}
.slide_x {position:relative;width:600px;height:280px;margin:20px auto;overflow:hidden;}
.slide_x a{text-decoration:none;}
img{border:none;display:block;width:600px;height:280px;overflow:hidden;}
.slide_x .list{width:9999px;}
.slide_x .list li{position:relative;float:left;width:600px;height:280px;overflow:hidden;}
.slide_x .list li a{display:block;}
.slide_x .list p{position:absolute;bottom:0;left:0;width:100%;height:24px;background:#000;filter:alpha(opacity=60);opacity:0.6;color:#eee;
font-weight:bold;font:12px/24px "\5b8b\4f53";text-indent:12px;}
.ks-switchable-nav{overflow:hidden;position:absolute;bottom:4px;right:6px;z-index:99}
.ks-switchable-nav li{float:left;width:16px;height:16px;margin:0 0 0 10px;border-radius:2px;background:#eee;color:#333;font:11px/16px Tahoma;text-align:center;cursor:pointer;}
.ks-switchable-nav li.select{background:#f30;color:#fff;}
.slide_x .prev,
.slide_x .next{position:absolute;top:110px;width:40px;height:50px;background-image:url(http://m1.img.srcdd.com/farm4/d/2014/0629/22/D61066CAA833217C1B31E2CDB7C44567_B500_900_80_100.png);background-repeat:no-repeat;text-align:center;cursor:pointer;}
.slide_x .prev{left:0;background-position:0 0;}
.slide_x .next{right:0;background-position:-40px 0;}
.slide_x .prev:hover{background-position:0 -50px;}
.slide_x .next:hover{background-position:-40px -50px;}
/* 焦点图 纵向滚动 */
.slide_y {position:relative;width:600px;height:280px;margin:40px auto;overflow:hidden;}
.slide_y a{text-decoration:none;}
.slide_y .list{width:680px;height:9999px;overflow:hidden;}
.slide_y .list li{position:relative;+display:inline;width:600px;height:280px;overflow:hidden;}
.slide_y .list li a,.slide_y .list li img{display:block;width:600px;height:280px;overflow:hidden;}
.slide_y .list p{position:absolute;bottom:0;left:0;width:100%;height:24px;background:#000;filter:alpha(opacity=60);opacity:0.6;color:#eee;
...JavaScript
/**
* JS switchable图片切换集合
* @class Switchable
* @param {object}
*/
function Switchable(cfg,callback) {
var self = this;
self.cfg = $.extend({},defaults,cfg || {});
self.index = 0;
self.callback = callback;
self._init();
// 绑定事件
self._bindEnv();
}
$.extend(Switchable.prototype,{
/*
* 初始化 是否生成数字按钮等事件操作
*/
_init: function(){
var self = this;
var cfg = self.cfg;
if(cfg.container == '') {return;}
var containerWidth = $(cfg.container).width(),
listLens = $(cfg.contentCls + ' li',cfg.container).length,
navCls = $('.ks-switchable-nav li',$(cfg.container)),
html = '';
if(cfg.markupType == 0) {
if(navCls.length <= 0 && listLens > 0 && cfg.numBtn) {
navCls = $('<ul class="ks-switchable-nav"></ul>');
$(cfg.container).append(navCls);
for(var i = 1; i <= listLens; i+=1) {
html += '<li class="slide_'+i+'">'+i+'</li>';
}
$('.ks-switchable-nav',$(cfg.container)).html(html);
}
}
$(cfg.contentCls,$(cfg.container)).css('position','relative');
if(cfg.switchTo > 0) {
self._currentItem(cfg.switchTo);
self.index = cfg.switchTo;
self._goto(self.index);
}else {
self._currentItem(self.index);
// 开始轮播函数
self._start(self.index);
}
},
/*
* 开始轮播
* @method _start {private}
*/
_start: function(index){
var self = this,
cfg = self.cfg;
if(!cfg.auto) {return;}
self._off();
self.timer = setTimeout(function(){
self._goto(index);
},cfg.time);
},
/*
* 轮播停止
* @method _off {private}
*/
_off: function(){
var self = this;
if(self.timer !== 'undefined') {
clearTimeout(self.timer);
}
},
/*
* 具体轮播到第几项
* @method _goto {private}
*/
_goto: function(index){
var self = this,
cfg = self.cfg,
container = $(cfg.container);
self._off();
self.index = parseInt(index,10);
var elemWidth = $(cfg.contentCls + ' li',container).width(),
elemHeight = $(cfg.contentCls + ' li',container).height(),
listLens = $(cfg.contentCls + '...