以下是 自适应jQuery焦点图特效轮播滚动切换代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应jQuery焦点图特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/jquery.hiSlider.min.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 14px/2 'Microsoft YaHei', 'Arial';
}
li{
list-style: none;
}
li img{
display: block;
margin: 0 auto;
}
#wrap{
width: 80%;
min-width: 300px;
margin: 10px auto 80px;
background: #fefefe;
}
.hiSlider{
overflow: hidden;
height: 280px;
width: 500px;
background: #eee;
}
.hiSlider-item{
float: left;
}
</style>
</head>
<body>
<div id="wrap">
<h1>jquery.hiSlider.js 插件使用说明及示例</h1>
<h2>example1: 默认设置</h2>
<ul class="hiSlider hiSlider1">
<li data-title="11111" class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>
<li data-title="22222" class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>
<li data-title="33333" class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>
<li data-title="44444" class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>
<li data-title="55555" class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>
</ul>
<h2>example2: 弹性布局 + 淡入淡出</h2>
<ul class="hiSlider hiSlider2">
<li class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>
<li class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>
<li class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>
<li class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>
<li class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>
</ul>
<h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2>
<ul class="hiSlider hiSlider3">
<li class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>
<li class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>
<li class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>
<li class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>
<li class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>
</ul>
<h2>example4: 改变方向</h2>
<ul class="hiSlider hiSlider4">
<li data-title="11111" class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>
<li data-title="22222" class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>
<li data-title="33333" class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>
<li data-title="44444" class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>
<li data-title="55555" class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>
</ul>
</div>
<script src="js/jquery.1.9.1.js"></script>
<script src="js/jquery.hiSlider.min.js"></script>
<script>
$('.hiSlider1').hiSlider();
$('.hiSlider2').hiSlider({
isFlexible: true,
mode: 'fade',
isSupportTouch: false,
isShowTitle: false,
isShowPage: false,
titleAttr: function(curIdx){
return $('img', this).attr('alt');
}
});
$('.hiSlider3').hiSlider({
isFlexible: true,
isSupportTouch: true,
titleAttr: function(curIdx){
return $('img', this).attr('alt');
}
});
$('.hiSlider4').hiSlider({
startSlide: 2,
direction: 'top'
});
</script>
</body>
</html>JS代码(jquery.hiSlider.min.js):
!function(t){
function i(i,e){
this.$container=i,this.options=t.extend({
startSlide:0,item:".hiSlider-item",isFullScreen:!1,isFlexible:!1,isSupportTouch:"__proto__"in{
}
,isShowPage:!0,isShowTitle:!0,titleAttr:"data-title",isShowControls:!0,isAuto:!0,intervalTime:5e3,affectTime:300,mode:"move",direction:"left",onSwipeStart:t.noop,onSwipeMove:t.noop,minSwipeLength:30,onSwipeCancel:t.noop,onSwipeEnd:t.noop,onSwipeLeft:t.noop,onSwipeRight:t.noop,onSwipeTop:t.noop,onSwipeBottom:t.noop,onInited:t.noop,onMoveBefore:t.noop,onMoveAfter:t.noop,onSelected:t.noop}
,e),this.init()}
i.prototype={
init:function(){
this.$item=this.$container.find(this.options.item),this.size=this.$item.size(),this.curIndex=this.options.startSlide,this.setLayout(),this.playTimer=null,this.options.isAuto&&this.autoPlay(),this.options.isFlexible&&t(window).on("resize.hiSlider",t.proxy(this,"resize")),this.options.isSupportTouch&&this.touch()}
,touch:function(){
var t=this,i={
}
,e=this.options,o=e.minSwipeLength;
this.$container.on("touchstart",function(t){
var o=t.originalEvent.touches[0];
i.x1=o.pageX,i.y1=o.pageY,e.onSwipeStart.call(this,i)}
).on("touchmove",function(t){
var o=t.originalEvent.touches[0];
i.x2=o.pageX,i.y2=o.pageY,e.onSwipeMove.call(this,i)}
).on("touchend",function(){
if(i.x2&&Math.abs(i.x1-i.x2)>o||i.y2&&Math.abs(i.y1-i.y2)>o){
var n=t.swipeDirection(i.x1,i.x2,i.y1,i.y2);
e["onSwipe"+n].call(this,i),t.moveTo(n),e.onSwipeEnd.call(this,i)}
else e.onSwipeCancel.call(this,i);
i={
}
}
)}
,moveTo:function(t){
var i=this,e=i.options.direction;
"top"==e?"Bottom"==t?i[i.options.mode+"Prev"]():"Top"==t&&i[i.options.mode]():"left"==e&&("Right"==t?i[i.options.mode+"Prev"]():"Left"==t&&i[i.options.mode]())}
,swipeDirection:function(t,i,e,o){
var n=Math.abs(t-i),s=Math.abs(e-o);
return n>=s?t-i>0?"Left":"Right":e-o>0?"Top":"Bottom"}
,move:function(){
var t,i=this;
i.options.isAuto&&i.autoPlay(),++i.curIndex==i.size&&(i.curIndex=0,i.$container.css(i.getMove()),i.curIndex++),i.setTitle(),i.setPages(),t=i.curIndex==i.size-1?0:i.curIndex,i.options.onMoveBefore.call(i.$container,i.$item,t),i.$container.stop(!1,!0).animate(i.getMove(),i.options.affectTime,function(){
i.options.onMoveAfter.call(this,i.$item,t)}
)}
,movePrev:function(t){
var i=this;
1!=t&&("move"==i.options.mode?0==i.curIndex&&(i.curIndex=i.size-1,i.$container.css(i.getMove())):0==i.curIndex&&(i.curIndex=i.size),i.curIndex--),i.options.isAuto&&i.autoPlay(),i.setTitle(),i.setPages(),i.options.onMoveBefore.call(i.$container,i.$item,i.curIndex),i.$container.stop(!1,!0).animate(i.getMove(),i.options.affectTime,function(){
i.options.onMoveAfter.call(this,i.$item,i.curIndex)}
)}
,getMove:function(t){
var i={
}
,e=this.getSize(),o=this.options.direction;
return"top"==o?(i.top=-this.curIndex*e.height,t&&(i.width=e.width)):(i.left=-this.curIndex*e.width,t&&(i.height=e.height)),i}
,fade:function(){
var t=this;
t.options.isAuto&&t.autoPlay(),t.curIndex++,t.curIndex>t.size-1&&(t.curIndex=0),t.setTitle(),t.setPages(),t.options.onMoveBefore.call(t.$container,t.$item,t.curIndex),t.$item.fadeOut(t.options.affectTime).eq(t.curIndex).fadeIn(t.options.affectTime,function(){
t.options.onMoveAfter.call(this,t.$item,t.curIndex)}
)}
,fadePrev:function(t){
var i=this;
1!=t&&("move"==i.options.mode?0==i.curIndex&&(i.curIndex=i.size-1,i.$container.css(i.getMove())):0==i.curIndex&&(i.curIndex=i.size),i.curIndex--),i.options.isAuto&&i.autoPlay(),i.setTitle(),i.setPages(),i.options.onMoveBefore.call(i.$container,i.$item,i.curIndex),i.$item.fadeOut(i.options.affectTime).eq(i.curIndex).fadeIn(i.options.affectTime,function(){
i.options.onMoveAfter.call(this,i.$item,i.curIndex)}
)}
,setPages:function(){
if(this.options.isShowPage&&this.$pages){
var i=this.curIndex;
i==this.size-1&&"move"==this.options.mode&&(i=0),t("a",this.$pages).eq(i).addClass("active").siblings().removeClass("active")}
}
,setTitle:function(){
if(this.options.isShowTitle&&this.$title){
var i=this.$item.eq(this.curIndex);
this.$title.html(t.isFunction(this.options.titleAttr)?this.options.titleAttr.call(i,this.curIndex):i.attr(this.options.titleAttr))}
}
,setLayout:function(){
var i=(this.options,this.getSetCss());
this.$item.css(i.item),this.$container.css(i.container).wrap('<div class="hiSlider-wrap"/>'),this.$wrap=this.$container.parent(),this.$wrap.css(i.wrap),this.options.isShowTitle&&(this.$title=t('<div class="hiSlider-title"/>').insertAfter(this.$container),this.setTitle()),this.options.isShowPage&&(this.$pages=t('<div class="hiSlider-pages">'+this.getPages()+"</div>").insertAfter(this.$container),this.pagesSwitch()),this.options.isShowControls&&(this.$prev=t('<a href="javascript:;
" class="hiSlider-btn-prev">prev</a>'),this.$next=t('<a href="javascript:;
" class="hiSlider-btn-next">next</a>'),this.$container.after(this.$prev.add(this.$next)),this.controlsSwitch()),"move"==this.options.mode?(this.$container.append(this.$item.eq(0).clone().addClass("item-clone")),this.$item=this.$container.find(this.options.item),this.size=this.$item.size()):this.setFade(),this.options.onInited.call(this.$container,this.$item,this.options.startSlide)}
,resize:function(){
var t,i=this;
clearTimeout(t),t=setTimeout(function(){
i.$wrap.add(i.$item).css(i.getSize(i.options.direction)),i.$container.css(i.getMove(!0))}
,300)}
,setFade:function(){
this.$item.hide().eq(this.curIndex).show()}
,getSetCss:function(){
var t=this.getSize(),i={
}
,e=Math.min(this.options.startSlide,this.size);
return"fade"==this.options.mode?(t.position="absolute",i.height=t.height,i.width=t.width):("top"==this.options.direction?(i.height=100*(this.size+1)+"%",i.width=t.width,i.top=-(e*t.height)):(i.height=t.height,i.width=100*(this.size+1)+"%",i.left=-(e*t.width),t.float="left"),i.position="relative"),{
item:t,container:i,wrap:{
overflow:"hidden",position:"relative",width:t.width,height:t.height}
}
}
,autoPlay:function(){
var i=this;
clearTimeout(i.playTimer),i.playTimer=setTimeout(t.proxy(i,i.options.mode),i.options.intervalTime)}
,controlsSwitch:function(){
var i=this;
this.$next.on("click",t.proxy(i,i.options.mode)),this.$prev.on("click",t.proxy(i,i.options.mode+"Prev"))}
,pagesSwitch:function(){
if(this.options.isShowPage&&this.$pages){
var i=this;
t("a",this.$pages).on("click",function(){
i.curIndex=t(this).index(),i.options.onSelected.call(this,i.curIndex),i[i.options.mode+"Prev"](!0)}
)}
}
,getPages:function(){
var i=[],e=this.curIndex;
return t(this.$item).each(function(t){
var o=t==e?'class="active"':"";
i.push('<a href="javascript:;
" '+o+">"+(t+1)+"</a>")}
),i.join("")}
,getSize:function(){
var i,e=this.$item.eq(0);
if(this.options.isFullScreen)i={
width:t(window).width(),height:t(window).height()}
;
else if(this.options.isFlexible){
var e=this.$wrap?this.$wrap.parent():this.$container.parent();
i="top"==this.options.direction?{
height:e.height()}
:{
width:e.width()}
}
return i||{
width:e.width(),height:e.height()}
}
}
,t.fn.hiSlider=function(e){
return this.each(function(){
t(this).data("mr.slider",new i(t(this),e))}
),this}
}
(window.jQuery);
CSS代码(normalize.css):
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
分享到QQ
分享到微博
微信扫一扫
