图片轮播(仿优酷剧集首页)实现(jQuery)

来源：互联网发布：qq微信头像知乎编辑：程序博客网时间：2024/04/19 18:11

原理：
这里写图片描述
切换图片时，改变各个图片的class，不同class对应不同样式，过度动画使用transition属性实现。

html代码

<!doctype html><html><head><meta charset="utf-8"><title>3D图片轮播 </title><link rel="stylesheet" href="css/index.css"/></head><body><div class="container">    <div class="pre-left"><img src="img/0.jpg"/></div>    <div class="cur-left"><img src="img/1.jpg"/></div>    <div class="cur"><img src="img/2.jpg"/></div><!--当前显示-->    <div class="cur-right"><img src="img/3.jpg"/></div>    <div class="pre-right"><img src="img/4.jpg"/></div>    <div class="pre"><img src="img/5.jpg"/></div>    <div class="pre"><img src="img/6.jpg"/></div>    <span class="navigation navi-prev">        <img src="img/pre.png"/>    </span>    <span class="navigation navi-next">        <img src="img/next.png"/>    </span>    <ul class="orders-ul">        <li></li>        <li></li>        <li class="cur-li"></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></div><script src="js/jquery-3.2.1.min.js"></script><script src="js/index.js"></script></body></html>

css代码：

/* CSS Document */.container{    width:1200px;    height:400px;    margin:0 auto;    position:relative;    overflow:hidden;}.container div{    position:absolute;    transition:all .7s;}.container div>img{    width:100%;    height:100%;}.cur{    width:640px;    height:360px;    left:280px;    top:20px;    z-index:99;}.cur-left{    width:530px;    height:298px;    left:0;    top:52px;    z-index:88;    background: rgba(0,0,0,1);}.cur-right{    width:530px;    height:298px;    left:670px;    top:52px;    z-index:88;    background: rgba(0,0,0,1); }.cur-left img,.cur-right img{    opacity:0.6;}.pre-left{    width:440px;    height:228px;    left:-220px;    top:87px;    z-index:77px;}.pre-right{    width:440px;    heigth:228px;    left:980px;    top:87px;    z-index:77px;}.pre{    width:530px;    height:298px;    left:335px;    top:52px;    z-index:66;    opacity:0;}.navigation{    position:absolute;    display:inline-block;    width:34px;    height:62px;    background-color:#696969;    opacity:0.5;    cursor:pointer;    z-index:99;}.navigation:hover{opacity:0.7;}.navi-prev{    left:0;    top:169px;}.navi-next{    right:0;    top:169px;}.orders-ul{    margin:0;    padding:0;    list-style:none;    position:absolute;    bottom:0;    left:45%;}.orders-ul li{    display:inline-block;    width:10px;    height:10px;    margin:4px;    border-radius:5px;    float:left;    cursor:pointer;    background-color:#C0C0C0;    opacity:0.7;}.orders-ul li:hover{opacity:0.9;}.orders-ul .cur-li{background-color:#0AAA16;}

js代码：

// JavaScript Document// JavaScript Document$(function(){    var imgObjs = $(".container>div");    var len = imgObjs.length;    var timer;    var cur = 2;    /*下一张*/    function next(){        $(".pre-left").attr("class","pre");        $(".cur-left").attr("class","pre-left");        $(".cur").attr("class","cur-left");        $(".cur-right").attr("class","cur");        $(".pre-right").attr("class","cur-right");        imgObjs.eq((cur+3)%len).attr("class","pre-right");        cur++;        cur = cur>=len?0:cur;        lightOrder();    }    /*上一张*/    function prev(){        $(".pre-right").attr("class","pre");        $(".cur-right").attr("class","pre-right");        $(".cur").attr("class","cur-right");        $(".cur-left").attr("class","cur");        $(".pre-left").attr("class","cur-left");        imgObjs.eq((cur-3+len)%len).attr("class","pre-left");        cur--;        cur = cur<0?(len-1):cur;        lightOrder();    }    /*点击序号*/    function sel(index){        imgObjs.attr("class","pre");        imgObjs.eq(index).attr("class","cur");        imgObjs.eq((index-1+len)%len).attr("class","cur-left");        imgObjs.eq((index+1)%len).attr("class","cur-right");        imgObjs.eq((index-2+len)%len).attr("class","pre-left");        imgObjs.eq((index+2)%len).attr("class","pre-right");        cur = index;        lightOrder();    }    function auto(){        clearInterval(timer);        timer = setInterval(next,4000);    }    function pause(){        clearInterval(timer);    }    /*点亮序号*/    function lightOrder(){        $(".orders-ul li").eq(cur).addClass("cur-li").siblings("li").removeClass("cur-li");    }    $(".navi-prev").click(prev);    $(".navi-next").click(next);    $(".orders-ul li").click(function(){        var index = $(this).index();        sel(index);    });    $(".container").mouseenter(pause);    $(".container").mouseleave(auto);    auto();});

阅读全文

0 0