图片点击切换效果

qq_36311209 2016-10-29 11:22:34

不用插件可以做出这样的效果吗？我给看看链接 http://www.weather.com.cn/weather/101190101.shtml 就是这个效果

好多网上看到的都是不能循坏的他们有的是直接跳到第一个图请不吝赐教抱拳

最好有代码吧（菜鸟可能听不懂大神的口述 O(∩_∩)O谢谢）

...全文

199 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_36311209 2016-10-31

打赏
举报

上面效果都不是楼主需要的看链接上的效果一目了然

vswen5 2016-10-29

打赏
举报

这样的插件一大把把图片命名为1,2,3... var x = 1; $("#xyz").click(function(){ x++; $("#showimg").attr("src",x+".png"); })

似梦飞花 2016-10-29

打赏
举报


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

       div,div>img{
           position: relative;
           width: 200px;
           height: 200px;
       }
       div>span{
           position: absolute;
           top: 50%;
           z-index: 2;
       }
       div>span:nth-of-type(1){
           left: 0;
       }
       div>span:nth-of-type(2){
           right: 0;
       }
       img:before{
           position: absolute;
           top: 50%;
           left: 0;
           width: 100%;
           height: 100%;
           text-align: center;
           content: attr(src);
       }

    </style>
</head>
<body>
    <div>
        <span class="js_left"> < </span>
        <img src=""/>
        <span class="js_right"> > </span>
    </div>
    <script>
        const arr=['a','b','c','d'],len=arr.length;
        const img=document.querySelector('img');
        let index=0;
        document.body.onclick=function(e){
            var target= e.target;
            if(target.classList.contains('js_left')){
                index--;
                if(index<0) index+=len;
            }else if(target.classList.contains('js_right')){
                index++
                if(index>=len) index%=len;
            }
            img.src=arr[index]+'.jpg';
        }
    </script>
</body>
</html>

类似这样试试