用jquery手写当前放大效果轮播图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery焦点图蓝色箭头按钮切换代码</title>

<style type="text/css">
* {margin:0;padding:0;}
.box {margin-top:300px;width:100%;height:340px;position:relative;}
.list {width:1200px;height:300px;overflow:hidden;position:absolute;left:50%;margin-left:-600px;}
.btn {position:absolute;top:50%;margin-top:-50px;width:60px;height:100px;line-height:100px;
    font-size:30px;color:white;text-decoration:none;text-align:center;background:rgba(0,255,0,.5);
    cursor:pointer;}
.next {right:0;}
li {position:absolute;top:0;left:0;list-style:none;opacity:0;transition:all 0.3s ease-out;}
img {width:751px;height:300px;border:none;float:left;}
.p1 {transform:translate3d(-224px,0,0) scale(0.81);}
.p2 {transform:translate3d(0px,0,0) scale(0.81);transform-origin:0 50%;opacity:0.8;z-index:2;}
.p3 {transform:translate3d(224px,0,0) scale(1);z-index:3;opacity:1;}
.p4 {transform:translate3d(449px,0,0) scale(0.81);transform-origin:100% 50%;opacity:0.8;z-index:2;}
.p5 {transform:translate3d(672px,0,0) scale(0.81);}
.p6 {transform:translate3d(896px,0,0) scale(0.81);}
.p7 {transform:translate3d(1120px,0,0) scale(0.81);}
 .buttons {position:absolute;width:1200px;height:30px;bottom:0;left:50%;margin-left:-600px;text-align:center;padding-top:10px;}
.buttons a {display:inline-block;width:35px;height:5px;padding-top:4px;cursor:pointer;}
span {display:block;width:35px;height:1px;background:red;}
.blue {background:blue;}
</style>
</head>
<body>
<div class="box">
    <div class="list">
        <ul>
            <li class="p7"><a href="#"><img src="http://www.yesky.com/TLimages2009/yesky/special/images/2018zhuanti/1.png" alt="" /></a></li>
            <li class="p6"><a href="#"><img src="http://www.yesky.com/TLimages2009/yesky/special/images/2018zhuanti/2.png" alt="" /></a></li>
            <li class="p5"><a href="#"><img src="http://www.yesky.com/TLimages2009/yesky/special/images/2018zhuanti/3.png" alt="" /></a></li>
            <li class="p4"><a href="#"><img src="http://www.yesky.com/TLimages2009/yesky/special/images/2018zhuanti/44.jpg" alt="" /></a></li>
            <li class="p3"><a href="#"><img src="http://www.yesky.com/TLimages2009/yesky/special/images/2018zhuanti/55.jpg" alt="" /></a></li>
            <li class="p2"><a href="#"><img src="http://www.yesky.com/TLimages2009/yesky/special/images/2018zhuanti/66.jpg" alt="" /></a></li>
            <li class="p1"><a href="#"><img src="http://www.yesky.com/TLimages2009/yesky/special/images/2018zhuanti/77.jpg" alt="" /></a></li>
        </ul>
    </div>  
    <a href="javascript:;" class="prev btn"><</a>
    <a href="javascript:;" class="next btn">></a>
<div class="buttons">
        <a href="javascript:;"><span class="blue"></span></a>
        <a href="javascript:;"><span></span></a>
        <a href="javascript:;"><span></span></a>
        <a href="javascript:;"><span></span></a>
        <a href="javascript:;"><span></span></a>
        <a href="javascript:;"><span></span></a>
        <a href="javascript:;"><span></span></a>
    </div>
</div>
<script src="http://www.yesky.com/TLimages2009/yesky/wap/wxH5dtcy/dkle/js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $a=$(".buttons a");
var $s=$(".buttons span");
var cArr=["p7","p6","p5","p4","p3","p2","p1"];
var index=0;
$(".next").click(
    function(){
    nextimg();
    }
);
$(".prev").click(
    function(){
    previmg();
    }
);
//上一张
function previmg(){
    cArr.unshift(cArr[6]);
    cArr.pop();
    //i是元素的索引，从0开始
    //e为当前处理的元素
    //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
    $("li").each(function(i,e){
        $(e).removeClass().addClass(cArr[i]);
    });
    index--;
    if (index<0) {
        index=6;
    }
    show();
}

//下一张
function nextimg(){
    cArr.push(cArr[0]);
    cArr.shift();
    $("li").each(function(i,e){
        $(e).removeClass().addClass(cArr[i]);
        console.log(cArr[i]);
    });
    index++;
     if (index>6) {
        index=0;
    }
    show();
}

//通过底下按钮点击切换
$a.each(function(){
    $(this).click(function(){
        var myindex=$(this).index();
        var b=myindex-index;
        if(b==0){
            return;
        }
        else if(b>0) {
            /*
             * splice(0,b)的意思是从索引0开始,取出数量为b的数组
             * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
             * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
             * 这时候原本的数组也将这部分数组进行移除了
             * 再把移除的数组添加的原本的数组的后面
             */
            var newarr=cArr.splice(0,b);
            cArr=$.merge(cArr,newarr);
            $("li").each(function(i,e){
            $(e).removeClass().addClass(cArr[i]);
            })
            index=myindex;
            show();
        }
        else if(b<0){
            /*
             * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
             * 而b现在是负值,所以取出索引0到-b即为需要取出的数组
             * 也就是从原本的照片到需要点击的照片的数组
             * 然后将原本的数组跟取出的数组进行拼接
             * 再次倒序,使原本的倒序变为正序
             */
            cArr.reverse();
            var oldarr=cArr.splice(0,-b)
            cArr=$.merge(cArr,oldarr);
            cArr.reverse();
            $("li").each(function(i,e){
            $(e).removeClass().addClass(cArr[i]);
            })
            index=myindex;
            show();
        }
    })
})

//改变底下按钮的背景色
function show(){
        $($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
}

//点击class为p2的元素触发上一张照片的函数
$(document).on("click",".p2",function(){
    previmg();
    return false;//返回一个false值，让a标签不跳转
});

//点击class为p4的元素触发下一张照片的函数
$(document).on("click",".p4",function(){
    nextimg();
    return false;
});

//鼠标移入box时清除定时器
$(".box").mouseover(function(){
    clearInterval(timer);
})

//鼠标移出box时开始定时器
$(".box").mouseleave(function(){
    timer=setInterval(nextimg,4000);
})

//进入页面自动开始定时器
timer=setInterval(nextimg,4000);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>
用jquery手写当前放大效果轮播图

猜你喜欢
