スライダーをテープ状にしました。Chrome と Mozilla では十分に見えますが、Safari ではひどく見えます。多分誰かが問題を解決するのを助けることができます?!? 前もって感謝します!
CSS:
#wrapper1 #my_scroll {z-index:5; height:480px; width:640px; position:absolute; top:-10px; left:12px;}
#wrapper1 #bloc_wrap {height:480px; width:640px; z-index:7; overflow:hidden;}
#wrapper1 #wrapper_sl {height:480px;}
#wrapper1 #wrapper_sl .block {width:150px; background:blue; border:2px solid #fff; position:absolute; margin:-40px 0 0 0; z-index:1; height:108px; overflow:hidden; transition: all 1.2s linear ; -webkit-transition: all 1.2s linear ; -moz-transition: all 1.2s linear ; -webkit-border-radius: 15px; -moz-border-radius: 15px; zoom: 1; border-radius: 15px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}
#wrapper1 #wrapper_sl .block img {border:0px solid #FFF; height:108px; cursor:pointer; margin:0 0 0 -16px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
#wrapper1 #my_scroll .main {position:relative;}
#wrapper1 #my_scroll .main div {display:none; background:green; position:absolute; z-index:5; top:74px; left:78px;}
#wrapper1 #my_scroll .main div a {display:block; position:relative; width:560px; height:350px; border:solid 1px #000000; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; overflow:hidden; color:#ffffff; text-decoration:none;}
jquery:
var docheight = $("#my_scroll").outerHeight();
var docwidth = $(window).width();
// Slider "circular motion" Drew - magart.com.ua START
var myDiv = document.getElementById("bloc_wrap");
var ImgDiv = $("#wrapper_sl").find(".block");
var ImgLink = $("#wrapper_sl").find(".block a");
var $size_dug = 230; //radius
var $smes_x = 230;
var $smes_y = docheight - $size_dug - 17;
var $kolvo = 14; //kolichestvo blokov
var $skorost = 200; //cem bolshe tem medlennei (dilitel skorosti)
var $ugol = (2 * Math.PI / $kolvo);
var $start_pr = 0;
var $global_v = 0;
var main = $('#my_scroll').find('.main');
$(ImgLink).click(function () {
var ImgRel = $(this).attr('rel');
main.find('div').fadeOut(100);
$('#my_scroll .main ' + ImgRel).fadeIn(250);
});
function sec1() {
$global_v = $global_v + 10;
$nowz = (($global_v + $start_pr) / $skorost) + $ugol * 2;
for (var ink = 0, len = $kolvo; ink < len; ink++) {
uno1 = $(ImgDiv[ink]);
$rad1 = ((ink + 1) * $ugol + $nowz);
$deg1 = $rad1 * 360 / (2 * Math.PI) + 270;
trata = Math.sin(-($rad1)) * $size_dug + $smes_x;
if (trata > 260) {
zind = 1;
} else {
zind = 10;
}
uno1.css({
top: Math.cos($rad1) * $size_dug + $smes_y,
left: trata,
zIndex: zind,
transform: 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)',
'-moz-transform': 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)',
'-webkit-transform': 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)'
});
};
}
// Slider "circular motion" Drew - magart.com.ua END
sec1();