请问用JS怎样做这个效果？（点击下边的圆点转换图片）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了请问用JS怎样做这个效果？（点击下边的圆点转换图片）相关的知识，希望对你有一定的参考价值。
使用Jquery类库，步骤：
1、准备好html：
<div class="container"><div class="item-list">
<div class="item active"><img src="0.jpg" alt="第1张图"></div>
<div class="item"><img src="1.jpg" alt="第2张图"></div>
<div class="item"><img src="2.jpg" alt="第3张图"></div>
</div>
<div class="item-control">
<a href='javascript:;' class="active">●</a>
<a href='javascript:;'>●</a>
<a href='javascript:;'>●</a>
</div>
</div>
2、为html设置样式
<style>.container
width: 500px;
height: 300px;
text-align: center;
background: red;
position:relative;
.container>.item-control
display: inline-block;
width: 100%;
left: 0;
position: absolute;
bottom: 10px;
background: rgba(0,0,0,0.2);
.container>.item-control>a
font-size: 20px;
color: rgba(255,255,255,0.7);
text-decoration: none;
.container>.item-control>a.active
color: #fff;
.container>.item-list,
.container>.item-list>.item
width: 100%;
height: 100%;
.container>.item-list>.item
display: none;
.container>.item-list>.item.active
display: block;
</style>
3、编写Js
(function()
$(document).on('click','.container .item-control a',function()
var _index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.container .item-list .item').eq( _index ).addClass('active').siblings().removeClass('active');
)
)()
</script>
最终效果见图：
<html>
<head>
<title>3种常用网站图片轮播切换代码</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css"/>
<!--Luara样式文件-->
<!--渐隐样式-->
<link rel="stylesheet" href="css/luara.css"/>
<!--左滑样式-->
<link rel="stylesheet" href="css/luara.left.css"/>
<!--上滑样式-->
<link rel="stylesheet" href="css/luara.top.css"/>
</head>
<body>
<script src="js/jquery-1.8.3.min.js"></script>
<!--Luara js文件-->
<script src="js/jquery.luara.0.0.1.min.js"></script>
<h5>渐隐</h5>
<hr/>
<!--Luara图片切换骨架begin-->
<div class="example">
<ul>
<li><img src="images/1.jpg" alt="1"/></li>
<li><img src="images/2.jpg" alt="2"/></li>
<li><img src="images/3.jpg" alt="3"/></li>
<li><img src="images/4.jpg" alt="4"/></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!--Luara图片切换骨架end-->
<script>
$(function()
<!--调用Luara示例-->
$(".example").luara(width:"500",height:"334",interval:4000,selected:"seleted");
);
</script>
<h5>上滑</h5>
<hr/>
<!--Luara图片切换骨架begin-->
<div class="example1">
<ul>
<li><img src="images/1.jpg" alt="1"/></li>
<li><img src="images/2.jpg" alt="2"/></li>
<li><img src="images/3.jpg" alt="3"/></li>
<li><img src="images/4.jpg" alt="4"/></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!--Luara图片切换骨架end-->
<script>
$(function()
<!--调用Luara示例-->
$(".example1").luara(width:"500",height:"334",interval:5000,selected:"seleted",deriction:"top");
);
</script>
<h5>左滑</h5>
<hr/>
<!--Luara图片切换骨架begin-->
<div class="example2">
<ul>
<li><img src="images/1.jpg" alt="1"/></li>
<li><img src="images/2.jpg" alt="2"/></li>
<li><img src="images/3.jpg" alt="3"/></li>
<li><img src="images/4.jpg" alt="4"/></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!--Luara图片切换骨架end-->
<script>
$(function()
<!--调用Luara示例-->
$(".example2").luara(width:"500",height:"334",interval:4500,selected:"seleted",deriction:"left");
);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>
</html> 参考技术B
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', //内容标签 默认为<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+= '<li class="'+ settings.current +'"><a href="javascript:void(0);" target="_self">'+ i +'</a></li>';
else _html+= '<li class=""><a href="javascript:void(0);" target="_self">'+ i +'</a></li>';
$(settings.switcher).html(_html);
)(jQuery); 参考技术C
你改改宽度和高度就能用了要单独说下面那个原点的原理，你就写一组li或者span或者a呀，然后循环下，给每个添加上点击事件
结构：图片和小圆点一一匹配
事件：onmouseover/onclick
实现：对应的图片显现出来（display）
思路：点击对应的小按钮出现对应的图片，给对应的按钮添加自定义属性，让图片获取当前按钮下的属性
使用ViewPager实现图片轮播
参考技术A首先我们来看一下运行的效果，如下所示：
这是在我们的项目中经常会用到的图片轮播效果，一般用于广告图片的展示。
1）自动播放；
2）无限滑动；
3）手指拖拽图片时暂停自动轮播，松开后继续自动轮播；
4）含动画效果的小圆点指示器。
本文将介绍利用ViewPager实现无限轮播图片，图片下方加上小圆点指示器标记当前位置，并利用Handler实现自动轮播图片。
1、实现自动播放
思路：没隔一段时间让ViewPager更换一次页卡，使用Handler来实现。
1）标记是否自动播放
2）每隔一段时间使用Handler发送一次更换页卡的任务
3）在任务中每隔一段时间再次发送任务，这样循环发送就实现了自动播放的效果。
2、实现无限滑动
思路：设置页卡视图列表时，在前后额外各加一个页卡。最前面加最后一张图片，最后面加第1张图片。然后每当切换到最前的页卡时，就替换成倒数第2个页卡；每当切换到最后的页卡时，就替换成第2个页卡。这样一来就形成了连贯，自然实现了无限滑动的功能。
1）设置ViewPager的视图列表时，在前后各加一个页卡。
2）在监听ViewPager的页卡状态改变中，当滑动到第1个页卡时替换成倒数第2个页卡；当滑动到最后一个页卡时替换成第2个页卡。
3、手指滑动图片时停止自动播放
思路：使用一个标记来控制是否自动播放。
1）声明一个boolean变量，用来标记是否播放。
2）默认是自动播放，但当图片少于2张时不自动播放。
3）根据标记判断是否切换页卡
4）在监听ViewPager的页卡状态改变中，如果是拖动状态就不切换页卡。
4、自定义指示器
思路：使用一个LinearLayout作为容器，然后根据图片的数量向容器中不断添加绘制的小圆点，另外再设置变大变小的属性动画用于动画效果。监听ViewPager的页卡，每当切换到一个页卡时就将切换对应状态的小圆点，并且设置相应的动画效果。
1）绘制小圆点
未选中状态，灰色的圆。
选中状态，白色的圆。
2）属性动画
变大
变小
3）设置指示器
先是统一设置属性并添加到容器中，然后默认第1个小圆点为选中状态。选中状态的小圆点颜色由灰色变成白色，并且变大。
4）监听页卡
当页卡被选中时，相应的小圆点颜色由灰色变成白色，并且变大；之前的小圆点颜色由白色变成灰色，并且变小。
源码地址
ImageSlideshow
以上是关于请问用JS怎样做这个效果？（点击下边的圆点转换图片）的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript怎样做出一个画圆圈的效果啊，比如一张图片是一个小圆点，怎样让这个小圆点以20p