仿淘宝轮播图片

 

 <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>  //引用jquery类库
    <style type="text/css">   //自定义页面样式
        img{ border:0px;}
    *{ margin:0px; padding:0px}
    ul,li{ list-style-type:none}
    #container{ width:520px; height:280px;  margin:0px auto;}
    #focus{ width:520px; height:280px; position:relative; overflow:hidden}
    #focus ul{ height:280px; position:absolute}
    #focus ul li{ float:left}
    #focus .icon{ width:520px; height:20px; position:absolute; left:0px; top:260px; text-align:center;
                   padding:2px 0px}
                   #focus span{ display:inline-block; width:25px; height:12px; cursor:pointer; background:orange; margin-left:5px}
                   #focus .prenext{ width:180px; height:280px; position:absolute; cursor:pointer; top:0px}
                   #focus .pre{ left:0px; background:url("images/pre.png") no-repeat left:center}
                   #focus .next{ right:0px; background:url("images/next.png") no-repeat right:center}
                   #focus span.on{ background:blue}
    </style>

<script type="text/javascript">

        $(function() {            

var adv_count = $("#focus ul li").length;            

var fwidth = $("#focus").width();            

var index = 0;            

var picTimer;            

var btn = "<div class='icon'>";            

for (var i = 0; i < adv_count; i++) {                

btn += "<span></span>";            

}            

btn += "</div><div class='prenext pre'></div><div class='prenext next'></div>";            

$("#focus").append(btn);            

//$("#focus .icon span").css("width",fwidth*adv_count)            

$("#focus .icon span").css("opacity", 0.6).mouseover(function() {                

index = $("#focus .icon span").index(this);                

showPics(index);                

//alert(index);            

}).eq(0).trigger("mouseover");            

function showPics(index) {                

var nowleft = -index * fwidth;                

$("#focus ul").stop(true, false).animate({ "left": nowleft }, 300)                

$("#focus .icon span").removeClass("on").eq(index).addClass("on");                

$("#focus .icon span").animate({ "opacity": "0.6" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300);            

}            

$("#focus .prenext").css("opacity", "0").hover(function() {                

$(this).stop(true, false).animate({ "opacity": 0.6 }, 300);            

}, function() {                

$(this).stop(true, false).animate({ "opacity": 0 }, 300);            

});            

$("#focus .pre").click(function() {                

index--;                

if (index == -1) {                    

index = adv_count - 1;                

}                

showPics(index);            

})            

$("#focus .next").click(function() {                

index++;                

if (index == adv_count) {                    

index = 0;                 }                

showPics(index);            

})            

$("#focus").hover(function() {                

clearInterval(picTimer);            

}, function() {                

picTimer = setInterval(function() {                    

showPics(index);                    

index++;                    

if (index == adv_count) {                        

index = 0;                    

}                 }, 3000)             }).trigger("mouseleave");         });    

</script>

 

 <div id="container">
        <div id="focus">
            <ul>
                <li><a href="#">
                    <img src="../images/TB16KDvGVXXXXXqapXXvKyzTVXX-520-280.jpg" /></a></li>
                <li><a href="#">
                    <img src="../images/TB1FWgiGVXXXXagXFXXSutbFXXX.jpg" /></a></li>
                <li><a href="#">
                    <img src="../images/TB1imYSGFXXXXcYapXXvKyzTVXX-520-280.jpg" /></a></li>
                <li><a href="#">
                    <img src="../images/TB1j9dAHXXXXXcDXXXXSutbFXXX.jpg" /></a></li>
                <li><a href="#">
                    <img src="../images/TB1LZEPGVXXXXXzXpXXSutbFXXX.jpg" /></a></li>
            </ul>
        </div>
    </div>

转载于:https://www.cnblogs.com/fengmingming/p/4209897.html