各大商城網站產品相冊的圖片切換效果

時間 2019-11-22

原文原文鏈接

效果圖以下;
javascript

下面是代碼： css

css樣式： html

<style type="text/css">
            a {text-decoration:none;outline:none;}
            li  {list-style-type:none;}
            body{font-size:12px;font-family:'宋體';}
            ul,ol{list-style-type:none;}
            a{outline:none;}
            img{border:none;}
            .clear  {clear:both;}  
</style>

html代碼： java

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ASAMALL</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
    <img src="./p_w_picpath/img01.jpg" style="width:290px;height:247px;margin-left:47px;"  id="goodsid">
    <ul style="margin-top:5px;height:50px;width:300px;">
    <li style="float:left;line-height:50px;">
        <a style="background:url('./p_w_picpaths/left.gif') no-repeat left; height:50px;display:block;width:10px;"     </li>
    <li style="border: solid 1px #CECFCE;height:50px;width:50px;float:left;margin-left:3.5px; text-align:center;display:block;" class="goodslis">
        <img src="./p_w_picpath/goodsimg.jpg" style="border: solid 1px #CECFCE;width:46px;height:46px;vertical-align:middle;padding:1px;" class="goodsimgs">
    </li>
    <li style="border: solid 1px #CECFCE;height:50px;width:50px;float:left;margin-left:3.5px; text-align:center;display:block;" class="goodslis">
        <img src="./p_w_picpath/img01.jpg" style="border: solid 1px #CECFCE;width:46px;height:46px;vertical-align:middle;padding:1px;" class="goodsimgs">
    </li>                           
    <li style="border: solid 1px #CECFCE;height:50px;width:50px;float:left;margin-left:3.5px; text-align:center;display:block;" class="goodslis">
        <img src="./p_w_picpath/img02.jpg" style="border: solid 1px #CECFCE;width:46px;height:46px;vertical-align:middle;padding:1px;" class="goodsimgs">
    </li>                                 <li style="border: solid 1px #CECFCE;height:50px;width:50px;float:left;margin-left:3.5px; text-align:center;display:block;" class="goodslis">
        <img src="./p_w_picpath/img03.jpg" style="border: solid 1px #CECFCE;width:46px;height:46px;vertical-align:middle;padding:1px;" class="goodsimgs">
    </li>                           
    <li style="border: solid 1px #CECFCE;height:50px;width:50px;float:left;margin-left:3.5px; text-align:center;display:block;" class="goodslis">
        <img src="./p_w_picpath/img04.jpg" style="border: solid 1px #CECFCE;width:46px;height:46px;vertical-align:middle;padding:1px;" class="goodsimgs">
    </li>                           
    <li style="border: solid 1px #CECFCE;height:50px;width:50px;float:left;margin-left:3.5px; text-align:center;display:none;" class="goodslis">
        <img src="./p_w_picpath/img01.jpg" style="border: solid 1px #CECFCE;width:46px;height:46px;vertical-align:middle;padding:1px;" class="goodsimgs">
    </li>
    <li style="border: solid 1px #CECFCE;height:50px;width:50px;float:left;margin-left:3.5px; text-align:center;display:none;" class="goodslis">
        <img src="./p_w_picpath/img02.jpg" style="border: solid 1px #CECFCE;width:46px;height:46px;vertical-align:middle;padding:1px;" class="goodsimgs">
    </li>                                                                                               
    <li style="float:right;line-height:50px;">
        <a style="background:url('./p_w_picpaths/right.gif') no-repeat right; height:50px;display:block;width:10px;"     </li>
    </ul>
</div>
</body>
</html>

javascript代碼： jquery

<script type="text/javascript">
    //將圖片放到大框中顯示
    $(document).ready(function(){
        $('.goodsimgs').mouseover(function(){
            var src=$(this).attr("src");
            $('#goodsid').attr({src:src});
            $('#swtich').attr({src:src});
        });
    });
    //統計圖片的個數
    function countblock(){
        var lis=$('.goodslis');
        var count=0;
        for (var i = lis.length - 1; i >= 0; i--) {
            lis[i].style.display=='block';
            count++;
        };
        return count-2;//這裏減2是除去最左的和最右的點擊prev next
    }
    //當點擊右邊那個時
    function clickright(){
        var disblock=countblock();
        var lis=$('.goodslis');
        for (var i = lis.length - 1; i >= 0; i--) {
            if (lis[i].style.display=='block') {
                lis[i+1].style.display='block';
                lis[i-(disblock-1)].style.display='none';
                break;
            };
        };
    }
    //當點擊左邊那個時
    function clickleft(){
        var disblock=countblock();
        var lis=$('.goodslis');
        for (var i = 0; i <= lis.length - 1; i++) { 
            if (lis[i].style.display=='block') {
                lis[i-1].style.display='block';
                lis[i+(disblock-1)].style.display='none';
                break;
            };
        };
    }                          
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。