目錄
效果圖：
實作的內容：
代碼奉上：
實作原理我就不寫了，代碼注釋的比較詳細，歡迎指正！！
效果圖：
實作的內容：
1.自動向右旋轉，
2.點擊圖片自動把點擊的圖片旋轉到最前面，
3.點擊向左向右，分別向左向右旋轉，
4.這個樣式做的比較簡單哈，可以多設定一些樣式，看起來更炫酷，模子都有了，加起來就很容易了，
代碼奉上：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
*{
margin:0;padding:0;
}
#div_box{margin:0px auto;position:absolute;left:28%;width:680px;height:530px}
#div_box div{position:absolute;width:0;height:0;z-index:0;cursor:pointer;overflow:hidden;top:152px; left:10px;}
#div_box div img{width:100%;height:100%;vertical-align:top; float:left; border:0;}
.left{
position:absolute;
width: 100px;
height: 100px;
top: 40%;
left: 26%;
opacity:0;
}
.right{
position:absolute;
width: 100px;
height: 100px;
top: 40%;
left: 78%;
opacity:0;
}
</style>
</head>
<body>
<div id="box">
<div id="div_box" >
</div>
<span class='left' id='left' ><img src='../images/2/left.png'></span>
<span class='right' id='right' ><img src='../images/2/right.png'></span>
</div>
</body>
<script>
(function(){
var div_box = document.getElementById("div_box");// 獲取盒子
var box = document.getElementById("box");
//外層box設定滑鼠移入移出事件
box.addEventListener('mouseover',over);
box.addEventListener('mouseout',out);
//左右按鈕設定點擊事件
var leftSpan = document.getElementById("left");
leftSpan.addEventListener('click',toLeft);
var rightSpan = document.getElementById("right");
rightSpan.addEventListener('click',toRight);
var boxQuene=[];//用來存盤圖片dom物件的
//創建圖片
var img_num=7,middle_num=(img_num%2==0)?(img_num/2):Math.floor(img_num/2)+1;
function init(){
for(var i=1;i<=img_num;i++){
var div = document.createElement("div");
div.id="div_"+i;
var borderColor = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
div.style.border='3px solid '+borderColor;
div.style.borderRadius='8px';
div.addEventListener('click',check);
//加入圖片
var img = document.createElement("img");
img.src="../images/2/"+i+".jpg";
div.appendChild(img);
div_box.appendChild(div);
boxQuene.push(div);//一個個的推入到盒子佇列
}
//第一次設定卡片樣式
reset();
//定時向右翻
autoMove();
}
var left=0,top=50,c_top,zIndex=0,width=262,height=389,first,last,opacity;
//重新設定卡片的樣式
function reset(){
zIndex=0;
for(var i=0;i<boxQuene.length;i++){
var obj = boxQuene[i];
width=262,height=389,c_top=0;
//判斷是否要放到最后面的
if(i<middle_num-2){
first=true;
last=false;
}else if(i>middle_num){
first=false;
last=true;
}else{
first=false;
last=false;
}
if(i<middle_num){
zIndex++;
if(first){//放到最后的
left=50;
c_top=-30;
opacity=0.03
}else if(i==middle_num-1){//中間要突出顯示的
left=190;
width+=40;
height+=56;
c_top=30;
opacity=1
}else{
left=10
opacity=0.4
}
}else{
zIndex--;
if(last){//放到最后的
left =360;
c_top=-30;
opacity=0.03
}else{
left =400;
opacity=0.4
}
}
obj.style.zIndex=zIndex;
obj.children[0].id=i;
obj.style.opacity=opacity;
//使用自己封裝的影片函式
(function(o){
var o_width=width+'px',o_height=height+'px',o_left=left+'px',o_top=top+c_top+'px',index=i;
var param = {'width': o_width,'height': o_height,'left': o_left,'top': o_top};
animate(o,param,'fast');
})(obj);
}
}
//選中圖片事件函式
function check(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.id){
//找到當前點擊的目標
var cur = boxQuene.filter(function(item){
return target.id==item.children[0].id;
})
var curIndex = parseInt(/\d+/.exec(cur[0].children[0].id)[0]);
if(curIndex===middle_num-1){
return;
}else{
moveQuene(curIndex);
}
reset();
}
}
//滑鼠移入
function over(){
leftSpan.style.opacity=1;
rightSpan.style.opacity=1;
clearInterval(timmer);
}
//滑鼠移出
function out(){
leftSpan.style.opacity=0;
rightSpan.style.opacity=0;
autoMove();
}
//移動佇列
function moveQuene(curIndex){
var step = middle_num-1-curIndex;
if(step>0){
while(step>0){
//取到佇列最后一個元素，插入到最前面
boxQuene.unshift(boxQuene.pop());
step--;
}
}else{
step = Math.abs(step);
while(step>0){
//取到佇列第一個元素，插入到最后面
boxQuene.push(boxQuene.shift());
step--;
}
}
}
//獲取屬性值
function getStyle(obj, prop) {
var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;
return prevComputedStyle[prop];
}
/*
obj:dom物件
prop:影片引數
speed:執行速度 fast slow 3000等
func:回呼函式
*/
function animate(obj,prop,speed,func){
//防止重復影片事件
if(obj.timer) return ;
//定義定時器執行次數和總執行時間
var limit=20,totalTime;
if(typeof speed==='number'){//如果傳入的是
totalTime = speed;
}else if(speed==='slow'){
totalTime = 600;
}else if(speed==='fast'){
totalTime = 200;
}else{
totalTime = 400;
}
var time = totalTime/limit;
var n=0,cache={},display,primary_cur;//cache用來快取，省的每次都去dom獲取
obj.timer = setInterval(function(){
n++;//執行次數每次遞增
for(var p in prop){
if("display"===p) {
display = prop["display"];
if(display!=='none'){
obj.style['display'] = display;
}
delete prop["display"];
continue;
}
//判斷是否是可以遞增的屬性，如果不是則直接讓它生效，并從prop中洗掉，洗掉后就不用每次任務都執行它
var reg = /^(\d)+(px$)?/;//數字和像素這樣的判定為可以遞增的屬性
if(!reg.test(prop[p])){
obj.style[p] = prop[p];
delete prop[p];
continue;
}
var value,opacityFlag=(p == "opacity")?true:false;
var cur = 0;
if(cache[p+"_cur"]){//從快取中取
cur = cache[p+"_cur"];
value = cache[p+"_value"];
}else{
value = prop[p];
if(opacityFlag) {
//如果本來是隱藏的則cur默認就是0
if(getStyle(obj, 'display')!=='none'){
cur = Math.round(parseFloat(getStyle(obj, p)) * 100);
}
} else {
cur = parseInt(getStyle(obj, p));
//處理100px的格式
(typeof value==='string') && (value=value.replace(/px$/,""));
}
primary_cur=cur;
cache[p+"_value"] = value;
}
var incre ;
if(cache[p+'_increment']){//如果快取中有則從中取
incre = cache[p+'_increment'];
}else{
if(opacityFlag){
incre = (value*100-cur)/limit;//計算每次變化值
}else{
incre = (value-cur)/limit;//計算每次變化值
}
cache[p+'_increment']= incre;
}
//快取起來，這樣就不用每次都去dom中獲取了，
cache[p+"_cur"] = cur + incre;
if (opacityFlag) {
obj.style.filter = "alpha(opacity:"+(cur + incre)+" )";
obj.style.opacity = (cur + incre)/100 ;
}else {
obj.style[p] = cur + incre + "px";
}
}
//如果達到了最大執行次數，要清除定時器，并執行回呼函式
if(n==limit){
if(display==='none'){
obj.style['display'] = 'none';
}
//清除定時器
clearInterval(obj.timer);
obj.timer=undefined;
func && func();
}
},time)
}
var _ = {
isFunction : function(o){
return o!== null &&typeof o ==='function';
}
}
//
function toLeft(){
//將佇列的第一個元素放到最后面
boxQuene.push(boxQuene.shift());
reset();
}
function toRight(){
//將佇列的最后一個元素放到最前面
boxQuene.unshift(boxQuene.pop());
reset();
}
var timmer;
//自動向右定時器
function autoMove(){
timmer = setInterval(function(){
//往右翻
boxQuene.unshift(boxQuene.pop());
reset();
},3000);
}
//初始化
init();
})()
</script>
</html>實作原理我就不寫了，代碼注釋的比較詳細，歡迎指正！ 給個三連哈，謝謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/243861.html
標籤：其他