各大商城网站产品相册的图片切换效果

时间 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>