请问用JS怎样做这个效果？（点击下边的圆点转换图片）

jquery

/*
 * yz silder 背景轮播
 * @ccx
 * 创建于：2014/10/03
 */
(function($){
    $.fn.yzSilder = function(options){
        var settings ={
            affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
            speed: 1200, //动画速度
            space: 6000, //时间间隔
            auto: true, //自动滚动
            trigger: 'mouseover', //触发事件 注意用mouseover代替hover
            conbox: '.conbox', //内容容器id或class
            ctag: 'a', //内容标签 默认为
            switcher: '.switcher', //切换触发器id或class
            stag: 'a', //切换器标签 默认为a
            current:'cur', //当前切换器样式名称
            rand:false, //是否随机指定默认幻灯图片
            prev:'#ban_prev',//切换上一张 id或class
            next:'#ban_next',//切换下一张    id或class
            sliderLast:0,
            mousewheel:false,
            sliderFirst:0
        };
        settings = $.extend({}, settings, options);
        var index = 1;
        var last_index = 0;
        var $prev=$(this).find(settings.prev);
        var $next=$(this).find(settings.next);
        var $conbox = $(this).find(settings.conbox),$contents = $conbox.find(settings.ctag);
        /*创建圆点图标并且居中*/
        _create_icon();
        //
        var $switcher = $(this).find(settings.switcher),$stag = $switcher.find(settings.stag);
        if(settings.rand) {index = Math.floor(Math.random()*$contents.length);slide();}
        if(settings.affect == 'fade'){
            $.each($contents,function(k, v){
                (k === 0) ? $(this).css({'position':'absolute','z-index':9}):$(this).css({'position':'absolute','z-index':1,'opacity':0});
            });
        }
        function slide(){
            if (index >= $contents.length) {
                index = 0;
                if(typeof settings.sliderLast=='function'){
                    settings.sliderLast();
                    //return
                }

            }
            if(index<0) {
                index=$contents.length-1;
                if(typeof settings.sliderFirst=='function'){
                    settings.sliderFirst();
                    return
                }
            }
            $stag.removeClass(settings.current).eq(index).addClass(settings.current);
            switch(settings.affect){
                case 'scrollx':
                    $conbox.width($contents.length*$contents.width());
                    $conbox.stop().animate({left:-$contents.width()*index},settings.speed);
                break;
                case 'scrolly':
                    $contents.css({display:'block'});
                    $conbox.stop().animate({top:-$contents.height()*index+'px'},settings.speed);
                    break;
                case 'fade':
                    $contents.eq(last_index).stop().animate({'opacity': 0}, settings.speed/2).css('z-index',1)
                        .end()
                        .eq(index).css('z-index',9).stop().animate({'opacity': 1}, settings.speed/2)
                    break;
                case 'none':
                    $contents.hide().eq(index).show();
                    break;
            }
            last_index = index;
            index++;
        };
        if(settings.auto) var Timer = setInterval(slide, settings.space);
        $stag.bind(settings.trigger,function(){_pause()
            index = $(this).index();
            slide();
            _continue()
        });

        if(settings.mousewheel){
            $(this).bind('mousewheel', function(event, delta) {
                event.preventDefault();
                if(delta<0){
                    slide();
                    _continue()
                }
                else{
                    index =last_index-1;
                    slide();
                    _continue()
                }
            });
        }

        //异类啊！！
        $prev.bind("click",function(){_pause()
            index =last_index-1;
            slide();
            _continue()
        });

        $next.bind("click",function(){_pause()
            index =last_index+1;
            slide();
            _continue()
        });

        $conbox.hover(_pause,_continue);
        function _pause(){
            clearInterval(Timer);
        }
        function _continue(){
            if(settings.auto)Timer = setInterval(slide, settings.space);
        }
        /*创建圆点图标;根据轮播图片的数量*/
        function _create_icon(){
            var _html = '';
            for(var i=1;i<=$contents.length;i++){
                if(i==1) _html+= ''+ i +'';
                else _html+= ''+ i +'';
            }
            $(settings.switcher).html(_html);
        }
    }
})(jQuery);

1. 结构：图片和小圆点一一匹配

2. 事件：onmouseover/onclick

3. 实现：对应的图片显现出来（display）

4. 思路：点击对应的小按钮出现对应的图片，给对应的按钮添加自定义属性，让图片获取当前按钮下的属性
   

抛砖引玉
假如上边6张图片,显示的张透明度是1，其他的事0，下边的原点假如是个ul
var imgs=document.getelementsByTagname('img');
var lis=document.getelementsByTagname('li');
for(var i=0;i{
lis[i].index=i;
lis[i].onclick=functiion()
{
for(var j=0;j{
imgs[j].style.opacity='0';
}
imgs[this.index].style.opacity='1';
}
}
///////////////////
望采纳