如何实现图片轮换的效果

来源：互联网发布：淘宝客网页制作编辑：程序博客网时间：2024/04/29 23:56

实现上面的效果图：

HTML代码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>-->    <title>3A</title>    <link href="css/reset.css" rel="stylesheet">    <link href="css/style.css" rel="stylesheet">    <!--<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">-->    <script src="jquery-2/jquery-2.1.1.js"></script>    <script type="text/javascript" src="js/style.js"></script>    <!--<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>--></head><body><div class="homeWraper">    <div id="focus">        <ul>            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>            <li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>        </ul>    </div>    </div></body></html>

css代码如下：

#focus{     width: 1239px;     height: 370px;     overflow: hidden;     position: relative;     margin: 25px auto; }#focus ul {    position: absolute;}#focus ul li{    float: left;    width: 1239px;    height: 370px;    overflow: hidden;    position: relative;}#focus ul li div {    position: absolute;    overflow: hidden;}#focus .btn {    position: absolute;    height: 18px;    right: 19px;    bottom: 11px;}#focus .btn span{    display: inline-block;    _display: inline;    _zoom: 1;    width: 19px;    height: 18px;    line-height: 18px;    margin-left: 10px;    _font-size: 0;    cursor: pointer;    background-color: #ffffff;}#focus .btn span.on {    background: #0593d3;}.proHotsLeft ol.proHotsLeftList{    float: left;}.proHotsLeftList li{    position: relative;    cursor: pointer;    width: 355px;    height: 50px;    line-height: 50px;    font-size: 16px;    color: #ffffff;    background-color: #e5e4e4;    border-bottom: 1px solid #fff;}.proHotsLeftList li .proHotsLeftNum{    font-size: 30px;    padding-left: 18px;    padding-right: 32px;    color: #b5b4b4;}.proHotsLeftList li.hover{    background-color: #0593d3;    border-bottom: 1px solid #91d0ec;}.proHotsLeftList li.hover span.arrow{    background-image: url("../images/icon01.png");    background-repeat: no-repeat;}.proHotsLeft li.hover span.proHotsLeftNum{    color: #ffffff;}

js代码如下：

$(function(){    var sWidth = $("#focus").width();    var len = $("#focus ul li").length;    var index = 0;    var picTimer;    var $listItem = $(".proHotsLeft>ol>li");    var $divs = $('.itemRight>div');    var btn = "<div class='btn'>";    for( var i = 0; i < len; i++){        btn +="<span></span>";    }    btn +="</div>";    $("#focus").append(btn);    $("#focus .btn span").mouseenter(function(){        index = $("#focus .btn span").index(this);        showPics(index);    }).eq(0).trigger("mouseenter");    $("#focus ul").css("width",sWidth * (len));    $("#focus").hover(function(){        clearInterval(picTimer);    },function(){        picTimer = setInterval(function(){            showPics(index);            index++;            if(index == len) {index = 0;}        },1000)    }).trigger('mouseleave');    function showPics(index){        var nowLeft = -index*sWidth;        $("#focus ul").stop(true,false).animate({"left":nowLeft},300);        $("#focus .btn span").eq(index).addClass('on').siblings().removeClass('on');    }    $listItem.on("mouseenter",function(){        index = $(this).index();        $(this).addClass('hover').siblings().removeClass("hover");        $divs.eq(index).show().siblings().hide();    })    $(".itemCar").on('mouseenter',function(){        var $mask =$("<div class='shadow'></div>");//        $mask.appendTo($(this).find('.itemImgs'));        $mask.appendTo($(this).children('.itemImgs'));    })    $(".itemCar").on("mouseleave",function(){//        $(this).find(".shadow").remove();        //children鐨勯€熷害姣攆ind锛堟ā绯婃煡璇級瑕佸揩        $(this).children('.itemImgs').children(".shadow").remove();    })})

0 0