常用幻灯
HTML
<!--幻灯-->
<div class="main_visual">
<div class="flicking_con">
<div class="flicking_inner">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
</div>
<div class="main_image">
<ul>
<li>
<div class="img_5">
<div class="center img2-center"></div>
</div>
<div>
<h1>象云混合云2.3版本新功能</h1>
<blockquote style="margin-top: 1rem;">
象云混合云2.3版本震撼上线，业内首家提供金属裸机租用服务，新上线缓存服务、mysql数据库服务等。
</blockquote>
<a href="jinshuluoji.html" class="btn">了解详情</a>
</div>
</li>
<li>
<div class="img_5">
<div class="center img4-center"></div>
</div>
<div>
<h1>私有云1.3版本功能介绍</h1>
<blockquote style="margin-top: 1rem;">
象云私有云平台包括IaaS、PaaS、SaaS服务；以及金属裸机、虚实结合、自动化运维等。
</blockquote>
<a href="siyouyun.html" class="btn">了解详情</a>
</div>
</li>
<li>
<div class="img_5">
<div class="center img5-center"></div>
</div>
<div>
<h1>快速组建“虚实结合架构场景”</h1>
<blockquote style="margin-top: 1rem;">
虚实结合技术是象云自行开发的一项技术，通过自动化的脚本自动实现物理机和虚拟机之间畅行通信。既满足了对物理机性能的要求，又满足了动态扩展，弹性伸缩的要求。
</blockquote>
<a href="xushijiehe.html" class="btn">了解详情</a>
</div>
</li>
<li>
<div class="img_5">
<div class="center img1-center"></div>
</div>
<div>
<h1>客户案例</h1>
<blockquote style="margin-top: 1rem;">
借贷宝、九州证券、中软融鑫、武曲星、九信金融、阳光保险等金融客户共同的选择，产品致力于可靠性、安全性、数据可溯源性、一致性、合规性、高性能。
</blockquote>
<a href="anli.html" class="btn">了解详情</a>
</div>
</li>
</ul>
<a href="javascript:void(0);" id="btn_prev"></a>
<a href="javascript:void(0);" id="btn_next"></a>
</div>
</div>
<style type="text/css">
div.flicking_con {
width: 990px;
margin: 0 auto;
position: relative
}
/*幻灯小点位置*/
div.flicking_con .flicking_inner {
position: absolute;
top: 350px;
left: 50%;
z-index: 2;
height: 21px;
margin-left:-110px;
}
div.flicking_con a{
float: left;
width: 21px;
height: 21px;
/*margin: 0;*/
margin-right: 34px;
padding: 0;
background: url('/banner_hd/btn_main_img.png') 0 0 no-repeat;
display: block;
text-indent: -9999999px
}
div.flicking_con a.on{
background-position: 0 -21px
}
/*幻灯主体设置*/
.main_image {
width: 100%;
height: 400px;
overflow: hidden;
margin: 0 auto;
position: relative
}
.main_image ul {
width: 9999px;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.main_image li {
float: left;
width: 100%;
height: 100%;
}
.main_image li span {
display: block;
width: 100%;
height: 100%;
}
.main_image li a {
display: block;
width: 100%;
height: 100%;
background-szie: 1540px;
}
/*单张banner设置*/
div.main_image ul li a.btn6 {
background: url("/sp2/banner_bg1.png") center no-repeat;
height: 499px;
}
div.ad1 div.ad2_banner{
background: url("/sp2/banner2.png") center no-repeat;
height: 499px;
}
/*banner 左右箭头*/
#btn_prev {
background: url('/images/index/banner/hover_left.png') no-repeat left top;
left: 50px;
}
#btn_next {
background: url('/images/index/banner/hover_right.png') no-repeat right top;
right: 50px;
}
</style>
JS 引入JQUERY
<script type="text/javascript">
/*幻灯*/
$(document).ready(function () {
$(".main_visual").hover(function(){
$("#btn_prev,#btn_next").fadeIn()
},function(){
$("#btn_prev,#btn_next").fadeOut()
})
$dragBln = false;
$(".main_image").touchSlider({
flexible : true,
speed : 200,
btn_prev : $("#btn_prev"),
btn_next : $("#btn_next"),
paging : $(".flicking_con a"),
counter : function (e) {
$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
}
});
$(".main_image").bind("mousedown", function() {
$dragBln = false;
})
$(".main_image").bind("dragstart", function() {
$dragBln = true;
})
$(".main_image a").click(function() {
if($dragBln) {
return false;
}
})
// autoplay
/* timer = setInterval(function() { $("#btn_next").click();}, 5000);
$(".main_visual").hover(function() {
clearInterval(timer);
}, function() {
timer = setInterval(function() { $("#btn_next").click();}, 5000);
})
$(".main_image").bind("touchstart", function() {
clearInterval(timer);
}).bind("touchend", function() {
timer = setInterval(function() { $("#btn_next").click();}, 5000);
})*/
});
/*首页左右滚动案列*/
$(function(){
/*======右按钮======*/
$(".arrow-right").click(function(){
nextscroll();
});
function nextscroll(){
var vcon = $(".list-case");
var offset = ($(".list-case li").width()*-1);
vcon.stop().animate({marginLeft:offset},"slow",function(){
var firstItem = $(".list-case ol li").first();
vcon.find(".list-case-anli").append(firstItem);
$(this).css("margin-left","0px");
});
};
/*========左按钮=========*/
$(".arrow-left").click(function(){
var vcon = $(".list-case");
var offset = ($(".list-case li").width()*-1);
var lastItem = $(".list-case ol li").last();
vcon.find(".list-case-anli").prepend(lastItem);
vcon.css("margin-left",offset);
vcon.animate({marginLeft:"0px"},"slow")
});
});
</script>
JS插件引入
jquery.touchSlider.js
/* 閰风珯浠ｇ爜鏁寸悊 http://www.5icool.org */
/**
* @name jQuery.touchSlider
* @version 201209_2
* @since 201106
* @param Object settings 頇橁步氤€靾� 鞓る笇鞝濏姼
* roll - 靾滍櫂 (default true)
* flexible - 鞙犽彊 霠堨澊鞎勳泝 (default false)
* view - 雼れ 旎熂 (default 1)
* speed - 鞎犽媹氅旍澊靺� 靻嶋弰 (default 75)
* range - 雱橁箑 韺愳爼 氩旍渼 (default 0.15)
* page - 齑堦赴 韼橃澊歆€ (default 1)
* transition - CSS3 transition 靷毄 (default false)
* btn_prev - prev 氩勴娂 (jQuery Object, default null)
* btn_next - next 氩勴娂 (jQuery Object, default null)
* paging - page 氩勴娂 (jQuery Object, default null)
* initComplete - 齑堦赴頇� 旖滊氨
* counter - 鞀澕鞚措摐 旖滊氨, 旃挫毚韯�
*
* @example
$("#target").touchSlider({
flexible : true
});
*/
(function ($) {
$.fn.touchSlider = function (settings) {
settings.supportsCssTransitions = (function (style) {
var prefixes = ['Webkit','Moz','Ms'];
for(var i=0, l=prefixes.length; i < l; i++ ) {
if( typeof style[prefixes[i] + 'Transition'] !== 'undefined') {
return true;
}
}
return false;
})(document.createElement('div').style);
settings = jQuery.extend({
roll : true,
flexible : false,
btn_prev : null,
btn_next : null,
paging : null,
speed : 75,
view : 1,
range : 0.15,
page : 1,
transition : false,
initComplete : null,
counter : null,
multi : false
}, settings);
var opts = [];
opts = $.extend({}, $.fn.touchSlider.defaults, settings);
return this.each(function () {
$.fn.extend(this, touchSlider);
var _this = this;
this.opts = opts;
this._view = this.opts.view;
this._speed = this.opts.speed;
this._tg = $(this);
this._list = this._tg.children().children();
this._width = parseInt(this._tg.css("width"));
this._item_w = parseInt(this._list.css("width"));
this._len = this._list.length;
this._range = this.opts.range * this._width;
this._pos = [];
this._start = [];
this._startX = 0;
this._startY = 0;
this._left = 0;
this._top = 0;
this._drag = false;
this._scroll = false;
this._btn_prev;
this._btn_next;
this.init();
$(this)
.bind("touchstart", this.touchstart)
.bind("touchmove", this.touchmove)
.bind("touchend", this.touchend)
.bind("dragstart", this.touchstart)
.bind("drag", this.touchmove)
.bind("dragend", this.touchend)
$(window).bind("orientationchange resize", function () {
_this.resize(_this);
});
});
};
var touchSlider = {
init : function () {
var _this = this;
$(this).children().css({
"width":this._width + "px",
"overflow":"visible"
});
if(this.opts.flexible) this._item_w = this._width / this._view;
if(this.opts.roll) this._len = Math.ceil(this._len / this._view) * this._view;
var page_gap = (this.opts.page > 1 && this.opts.page <= this._len) ? (this.opts.page - 1) * this._item_w : 0;
for(var i=0; i<this._len; ++i) {
this._pos[i] = this._item_w * i - page_gap;
this._start[i] = this._pos[i];
this._list.eq(i).css({
"float" : "none",
"display" : "block",
"position" : "absolute",
"top" : "0",
"left" : this._pos[i] + "px",
"width" : this._item_w + "px"
});
if(this.opts.supportsCssTransitions && this.opts.transition) {
this._list.eq(i).css({
"-moz-transition" : "0ms",
"-moz-transform" : "",
"-ms-transition" : "0ms",
"-ms-transform" : "",
"-webkit-transition" : "0ms",
"-webkit-transform" : "",
"transition" : "0ms",
"transform" : ""
});
}
}
if(this.opts.btn_prev && this.opts.btn_next) {
this.opts.btn_prev.bind("click", function() {
_this.animate(1, true);
return false;
})
this.opts.btn_next.bind("click", function() {
_this.animate(-1, true);
return false;
});
}
if(this.opts.paging) {
$(this._list).each(function (i, el) {
//var btn_page = _this.opts.paging.eq(0).clone();
var btn_page = _this.opts.paging.eq(i);
//_this.opts.paging.before(btn_page);
btn_page.bind("click", function(e) {
_this.go_page(i, e);
return false;
});
});
//this.opts.paging.remove();
}
this.counter();
this.initComplete();
},
initComplete : function () {
if(typeof(this.opts.initComplete) == "function") {
this.opts.initComplete(this);
}
},
resize : function (e) {
if(e.opts.flexible) {
var tmp_w = e._item_w;
e._width = parseInt(e._tg.css("width"));
e._item_w = e._width / e._view;
e._range = e.opts.range * e._width;
for(var i=0; i<e._len; ++i) {
e._pos[i] = e._pos[i] / tmp_w * e._item_w;
e._start[i] = e._start[i] / tmp_w * e._item_w;
e._list.eq(i).css({
"left" : e._pos[i] + "px",
"width" : e._item_w + "px"
});
if(this.opts.supportsCssTransitions && this.opts.transition) {
e._list.eq(i).css({
"-moz-transition" : "0ms",
"-moz-transform" : "",
"-ms-transition" : "0ms",
"-ms-transform" : "",
"-webkit-transition" : "0ms",
"-webkit-transform" : "",
"transition" : "0ms",
"transform" : ""
});
}
}
}
this.counter();
},
touchstart : function (e) {
if((e.type == "touchstart" && e.originalEvent.touches.length <= 1) || e.type == "dragstart") {
this._startX = e.pageX || e.originalEvent.touches[0].pageX;
this._startY = e.pageY || e.originalEvent.touches[0].pageY;
this._scroll = false;
this._start = [];
for(var i=0; i<this._len; ++i) {
this._start[i] = this._pos[i];
}
}
},
touchmove : function (e) {
if((e.type == "touchmove" && e.originalEvent.touches.length <= 1) || e.type == "drag") {
this._left = (e.pageX || e.originalEvent.touches[0].pageX) - this._startX;
this._top = (e.pageY || e.originalEvent.touches[0].pageY) - this._startY;
var w = this._left < 0 ? this._left * -1 : this._left;
var h = this._top < 0 ? this._top * -1 : this._top;
if (w < h || this._scroll) {
this._left = 0;
this._drag = false;
this._scroll = true;
} else {
e.preventDefault();
this._drag = true;
this._scroll = false;
this.position(e);
}
for(var i=0; i<this._len; ++i) {
var tmp = this._start[i] + this._left;
if(this.opts.supportsCssTransitions && this.opts.transition) {
var trans = "translate3d(" + tmp + "px,0,0)";
this._list.eq(i).css({
"left" : "",
"-moz-transition" : "0ms",
"-moz-transform" : trans,
"-ms-transition" : "0ms",
"-ms-transform" : trans,
"-webkit-transition" : "0ms",
"-webkit-transform" : trans,
"transition" : "0ms",
"transform" : trans
});
} else {
this._list.eq(i).css("left", tmp + "px");
}
this._pos[i] = tmp;
}
}
},
touchend : function (e) {
if((e.type == "touchend" && e.originalEvent.touches.length <= 1) || e.type == "dragend") {
if(this._scroll) {
this._drag = false;
this._scroll = false;
return false;
}
this.animate(this.direction());
this._drag = false;
this._scroll = false;
}
},
position : function (d) {
var gap = this._view * this._item_w;
if(d == -1 || d == 1) {
this._startX = 0;
this._start = [];
for(var i=0; i<this._len; ++i) {
this._start[i] = this._pos[i];
}
this._left = d * gap;
} else {
if(this._left > gap) this._left = gap;
if(this._left < - gap) this._left = - gap;
}
if(this.opts.roll) {
var tmp_pos = [];
for(var i=0; i<this._len; ++i) {
tmp_pos[i] = this._pos[i];
}
tmp_pos.sort(function(a,b){return a-b;});
var max_chk = tmp_pos[this._len-this._view];
var p_min = $.inArray(tmp_pos[0], this._pos);
var p_max = $.inArray(max_chk, this._pos);
if(this._view <= 1) max_chk = this._len - 1;
if(this.opts.multi) {
if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] >= 100)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_max] = this._start[p_min] - gap;
this._list.eq(p_max).css("left", this._start[p_max] + "px");
}
} else if((d == -1 && tmp_pos[0] <= 0) || (this._drag && tmp_pos[0] <= -100)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_min] = this._start[p_max] + gap;
this._list.eq(p_min).css("left", this._start[p_min] + "px");
}
}
} else {
if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] > 0)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_max] = this._start[p_min] - gap;
this._list.eq(p_max).css("left", this._start[p_max] + "px");
}
} else if((d == -1 && tmp_pos[max_chk] <= 0) || (this._drag && tmp_pos[max_chk] <= 0)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_min] = this._start[p_max] + gap;
this._list.eq(p_min).css("left", this._start[p_min] + "px");
}
}
}
} else {
if(this.limit_chk()) this._left = this._left / 2;
}
},
animate : function (d, btn_click) {
if(this._drag || !this._scroll || btn_click) {
var _this = this;
var speed = this._speed;
if(btn_click) this.position(d);
var gap = d * (this._item_w * this._view);
if(this._left == 0 || (!this.opts.roll && this.limit_chk()) ) gap = 0;
this._list.each(function (i, el) {
_this._pos[i] = _this._start[i] + gap;
if(_this.opts.supportsCssTransitions && _this.opts.transition) {
var transition = speed + "ms";
var transform = "translate3d(" + _this._pos[i] + "px,0,0)";
if(btn_click) transition = "0ms";
$(this).css({
"left" : "",
"-moz-transition" : transition,
"-moz-transform" : transform,
"-ms-transition" : transition,
"-ms-transform" : transform,
"-webkit-transition" : transition,
"-webkit-transform" : transform,
"transition" : transition,
"transform" : transform
});
} else {
$(this).stop();
$(this).animate({"left": _this._pos[i] + "px"}, speed);
}
});
this.counter();
}
},
direction : function () {
var r = 0;
if(this._left < -(this._range)) r = -1;
else if(this._left > this._range) r = 1;
if(!this._drag || this._scroll) r = 0;
return r;
},
limit_chk : function () {
var last_p = parseInt((this._len - 1) / this._view) * this._view;
return ( (this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0) );
},
go_page : function (i, e) {
var crt = ($.inArray(0, this._pos) / this._view) + 1;
var cal = crt - (i + 1);
while(cal != 0) {
if(cal < 0) {
this.animate(-1, true);
cal++;
} else if(cal > 0) {
this.animate(1, true);
cal--;
}
}
},
counter : function () {
if(typeof(this.opts.counter) == "function") {
var param = {
total : Math.ceil(this._len / this._view),
current : ($.inArray(0, this._pos) / this._view) + 1
};
this.opts.counter(param);
}
}
};
})(jQuery);
浙公网安备 33010602011771号