请问用JS怎样做这个效果？（点击下边的圆点转换图片）
16个回答
展开全部
使用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
<script>
(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>
最终效果见图：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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);
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
结构：图片和小圆点一一匹配
事件：onmouseover/onclick
实现：对应的图片显现出来（display）
思路：点击对应的小按钮出现对应的图片，给对应的按钮添加自定义属性，让图片获取当前按钮下的属性
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
抛砖引玉
假如上边6张图片,显示的张透明度是1，其他的事0，下边的原点假如是个ul
var imgs=document.getelementsByTagname('img');
var lis=document.getelementsByTagname('li');
for(var i=0;i<lis.length;i++)
{
lis[i].index=i;
lis[i].onclick=functiion()
{
for(var j=0;j<imgs.length;j++)
{
imgs[j].style.opacity='0';
}
imgs[this.index].style.opacity='1';
}
}
///////////////////
望采纳
假如上边6张图片,显示的张透明度是1，其他的事0，下边的原点假如是个ul
var imgs=document.getelementsByTagname('img');
var lis=document.getelementsByTagname('li');
for(var i=0;i<lis.length;i++)
{
lis[i].index=i;
lis[i].onclick=functiion()
{
for(var j=0;j<imgs.length;j++)
{
imgs[j].style.opacity='0';
}
imgs[this.index].style.opacity='1';
}
}
///////////////////
望采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（14）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
