请问用JS怎样做这个效果？（点击下边的圆点转换图片） 如何用js实现点击图片切换另一图片，再次点击恢复？
\u8bf7\u95ee\u4e00\u4e0b\u5982\u4f55\u7528JS\u5236\u4f5c\u8fd9\u79cd\u6548\u679c\uff1a\u6309\u4e00\u4e0b\u6309\u94ae\uff0c\u6362\u4e00\u5f20\u56fe\u7247\u3002\u633a\u590d\u6742\u7684\u7a0b\u5e8f\uff1a
using System;
using System.Web;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Web.SessionState;
public class WaterMark : IHttpHandler, IRequiresSessionState {
// \u8981\u4f7f\u7528session\u5fc5\u987b\u5b9e\u73b0\u8be5\u63a5\u53e3\u9700\u8981\u5bfc\u5165System.Web.SessionState\u547d\u540d\u7a7a\u95f4
public void ProcessRequest(HttpContext context)
{
string checkCode = GenCode(5); // \u4ea7\u751f5\u4f4d\u968f\u673a\u5b57\u7b26
context.Session["Code"] = checkCode; //\u5c06\u5b57\u7b26\u4e32\u4fdd\u5b58\u5230Session\u4e2d\uff0c\u4ee5\u4fbf\u9700\u8981\u65f6\u8fdb\u884c\u9a8c\u8bc1
System.Drawing.Bitmap image = new System.Drawing.Bitmap(70, 22);
Graphics g = Graphics.FromImage(image);
try
{
//\u751f\u6210\u968f\u673a\u751f\u6210\u5668
Random random = new Random();
//\u6e05\u7a7a\u56fe\u7247\u80cc\u666f\u8272
g.Clear(Color.White);
// \u753b\u56fe\u7247\u7684\u80cc\u666f\u566a\u97f3\u7ebf
int i;
for (i = 0; i < 25; i++)
{
int x1 = random.Next(image.Width);
int x2 = random.Next(image.Width);
int y1 = random.Next(image.Height);
int y2 = random.Next(image.Height);
g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
}
Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold));
System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2F, true);
g.DrawString(checkCode, font, brush, 2, 2);
//\u753b\u56fe\u7247\u7684\u524d\u666f\u566a\u97f3\u70b9
g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
System.IO.MemoryStream ms = new System.IO.MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
context.Response.ClearContent();
context.Response.ContentType = "image/Gif";
context.Response.BinaryWrite(ms.ToArray());
}
finally
{
g.Dispose();
image.Dispose();
}
}
///
/// \u4ea7\u751f\u968f\u673a\u5b57\u7b26\u4e32
///
/// \u968f\u673a\u51fa\u51e0\u4e2a\u5b57\u7b26
/// \u968f\u673a\u51fa\u7684\u5b57\u7b26\u4e32
private string GenCode(int num)
{
//\u6839\u636e\u9700\u8981\u4ea7\u751f\u7684\u5b57\u7b26\u8fdb\u884c\u8bbe\u7f6e
string str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
char[] chastr = str.ToCharArray();
string code = "";
Random rd = new Random();
int i;
for (i = 0; i < num; i++)
{
code += str.Substring(rd.Next(0, str.Length), 1);
}
return code;
}
public bool IsReusable
{
get
{
return false;
}
}
}
function changeCode() {
var imgNode = document.getElementById("vimg");
imgNode.src = "handler/WaterMark.ashx?t=" + (new Date()).valueOf();}
\u7b80\u5355\u7684JS\u5b9e\u73b0\u4e0d\u4e86
\u65b9\u6cd5\u5982\u4e0b
window.onload=function(){
var Imgbtn=document.getElementById('btn');
var Img=document.getElementById('img');
Imgbtn.onclick=function(){
if(Img.src=='http://dl.bizhi.sogou.com/images/2012/01/19/191337.png') {
Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg';
}else{
Img.src='http://dl.bizhi.sogou.com/images/2012/01/19/191337.png'
}
}
}
\u8bd5\u5ba2\u5c0f\u5175
\u6269\u5c55\u8d44\u6599
JavaScript\u662f\u4e00\u79cd\u811a\u672c\u8bed\u8a00\uff0c\u5176\u6e90\u4ee3\u7801\u5728\u53d1\u5f80\u5ba2\u6237\u7aef\u8fd0\u884c\u4e4b\u524d\u4e0d\u9700\u7ecf\u8fc7\u7f16\u8bd1\uff0c\u800c\u662f\u5c06\u6587\u672c\u683c\u5f0f\u7684\u5b57\u7b26\u4ee3\u7801\u53d1\u9001\u7ed9\u6d4f\u89c8\u5668\u7531\u6d4f\u89c8\u5668\u89e3\u91ca\u8fd0\u884c\u3002
\u76f4\u8bd1\u8bed\u8a00\u7684\u5f31\u70b9\u662f\u5b89\u5168\u6027\u8f83\u5dee\uff0c\u800c\u4e14\u5728JavaScript\u4e2d\uff0c\u5982\u679c\u4e00\u6761\u8fd0\u884c\u4e0d\u4e86\uff0c\u90a3\u4e48\u4e0b\u9762\u7684\u8bed\u8a00\u4e5f\u65e0\u6cd5\u8fd0\u884c\u3002\u800c\u5176\u89e3\u51b3\u529e\u6cd5\u5c31\u662f\u4e8e\u4f7f\u7528try{}catch(){}\ufe30
Javascript\u88ab\u5f52\u7c7b\u4e3a\u76f4\u8bd1\u8bed\u8a00\uff0c\u56e0\u4e3a\u4e3b\u6d41\u7684\u5f15\u64ce\u90fd\u662f\u6bcf\u6b21\u8fd0\u884c\u65f6\u52a0\u8f7d\u4ee3\u7801\u5e76\u89e3\u8bd1\u3002V8\u662f\u5c06\u6240\u6709\u4ee3\u7801\u89e3\u8bd1\u540e\u518d\u5f00\u59cb\u8fd0\u884c\uff0c\u5176\u4ed6\u5f15\u64ce\u5219\u662f\u9010\u884c\u89e3\u8bd1\uff08SpiderMonkey\u4f1a\u5c06\u89e3\u8bd1\u8fc7\u7684\u6307\u4ee4\u6682\u5b58\uff0c\u4ee5\u63d0\u9ad8\u6027\u80fd\uff0c\u79f0\u4e3a\u5b9e\u65f6\u7f16\u8bd1\uff09\uff0c\u4f46\u7531\u4e8eV8\u7684\u6838\u5fc3\u90e8\u4efd\u591a\u6570\u7528Javascript\u64b0\u5199\uff08\u800cSpiderMonkey\u662f\u7528C++\uff09\uff0c\u56e0\u6b64\u5728\u4e0d\u540c\u7684\u6d4b\u8bd5\u4e0a\uff0c\u4e24\u8005\u6027\u80fd\u4e92\u6709\u4f18\u52a3\u3002
\u4e0e\u5176\u76f8\u5bf9\u5e94\u7684\u662f\u7f16\u8bd1\u8bed\u8a00\uff0c\u4f8b\u5982C\u8bed\u8a00\uff0c\u4ee5\u7f16\u8bd1\u8bed\u8a00\u7f16\u5199\u7684\u7a0b\u5e8f\u5728\u8fd0\u884c\u4e4b\u524d\uff0c\u5fc5\u987b\u7ecf\u8fc7\u7f16\u8bd1\uff0c\u5c06\u4ee3\u7801\u7f16\u8bd1\u4e3a\u673a\u5668\u7801\uff0c\u518d\u52a0\u4ee5\u8fd0\u884c\u3002
\u53c2\u8003\u8d44\u6599\uff1a\u767e\u5ea6\u767e\u79d1 JavaScript\u7f16\u7a0b
使用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';
}
}
///////////////////
望采纳
绛旓細鍏堣涓嬪疄鐜扮殑鎬濊矾锛1 椤甸潰甯冨眬锛屼竴鍫嗙瓑寰呮粴鍔ㄩ夋嫨鐨勫垪琛 鍏堝疄鐜颁竴涓珫鎺掔殑鍒楄〃锛岃Е灞忚兘婊氬姩锛屼篃灏辨槸璇村厛涓嶈冭檻閫夋嫨鐨勯棶棰 鍐欎竴涓浐瀹氶珮搴︾殑鐩掑瓙 鎶婁竴鍫嗗緟閫夋嫨鐨勫垪琛ㄦ斁閲岄潰 瑙﹀睆婊氬姩澶ф灏卞疄鐜颁簡 绠鍗曚唬鐮侊細 ... 2: 婊氬姩閫夋嫨 绗竴姝ョ洃鎺цЕ灞忔粴鍔 onmousedown onmousemove onmouseup 鐩戞帶榧犳爣瑙﹀睆...
绛旓細鍏跺疄寮瑰嚭灞傜殑鎬濊矾杩樻槸姣旇緝绠鍗曠殑锛氫竴鑸槸杩欎釜灞傛槸闅愯棌鐨(display:none)锛岀劧鍚庣偣鍑讳綘璇寸殑"鍥剧墖(鎴栬呬换浣曠殑椤甸潰鍏冪礌)"锛岃繖涓眰灏变細鏄剧ず锛堜竴鑸琩isplay:inline-block/block锛夛紝鍚屾椂璁剧疆涓涓伆鑹茬殑鑳屾櫙鐪嬭捣鏉ヨ繖涓眰鏄诞浜庝笅闈㈢殑灞備箣涓婄殑銆備笅闈㈡槸涓娈垫紨绀轰唬鐮侊細<!doctype html>寮瑰嚭灞傗斿埌娴忚鍣ㄤ腑澶旇儗鏅彉鏆*...
绛旓細鐩存帴鑷繁鍐欎竴涓氨鍙互浜嗭紝寰堢畝鍗曠殑锛屽氨鏄竴涓樉绀烘锛宎jax鑾峰彇鎺ㄨ崘鐨勪汉鐨勬樀绉帮紝鐒跺悗杩欎釜鏄剧ず妗嗙敤css璁剧疆display锛歯one;涓寮濮嬫槸闅愯棌鐨勶紝鐒跺悗js浠ｇ爜濡備笅 if($('.xxx').hasClass('on')){ $('.xxx').removeClass('on'); $('.xxx').css({ 'display' : 'none', }) }else...
绛旓細鐢╦s瑙﹀彂css鐨勮繃娓鏁堟灉鍙互鐢╥mpress.js瀹炵幇銆備互涓嬩緥瀛愬疄鐜颁簡鍩轰簬CSS3鍙樺寲鍜岃繃搴︽晥鏋:.jmpress('template', 'arraytemplate', { x: 100, y: 100, scale: 2, children: [ { x: 0, y: 150, scale: 0.2 }, { x: 0, y: 450, scale: 0.3 } ]});鏀寔鐜颁唬娴忚鍣–hrom...
绛旓細骞惰缃甶mg鐨勫楂樸3鐒跺悗鎴戜滑鍙互鍦╤tml澶撮儴鏍囬涓嬫坊鍔燾ss鏍峰紡浠ｇ爜鏉ユ帶鍒禿iv鐨勬樉绀鏁堟灉銆4鎺ヤ笅鏉ュ湪body鏍囩涓坊鍔js鐨勪簨浠秓nload锛屼篃灏辨槸鍔犺浇璇ラ〉闈㈢殑鏃跺欙紝璋冪敤onload鐨勫煎搴旂殑鏂规硶锛屽浘涓殑璇濆氨鏄痠nit()銆傚啀涓篿mg娣诲姞涓涓猧d灞炴э紝杩欐牱鎴戜滑鍙互閫氳繃getElementById(id鍊)鏉ュ緱鍒拌鍏冪礌鏍囩銆5鐒跺悗閫氳繃 ...
绛旓細寰堢畝鍗曠殑鍟︼紝鍔犱釜onscroll浜嬩欢鐨勫暒var lf=document.getElementById("div1");window.onload=function (){lf.onclick=function (){document.body.scrollTop=lf.offsetTop;}} window.onscroll=function (){ document.body.scrollTop=lf.offsetTop;}; ...
绛旓細鏀瑰簱鎻愪緵浜杩欎釜鏀寔銆 transit瀵瑰厓绱犺繘琛宑ss鐨勫彉鎹 tagcanvas3D鏍囩浜鏁堟灉璇︾粏 iconate鍥剧墖鍒囨崲鍔ㄧ敾 Snap.js宸/鍙充晶瀵艰埅鐨勫嚭鐜版晥鏋 CSSshake鎶栧姩鍔ㄧ敾 ClickSpark.js鐐瑰嚮鍚庣殑涓浜涢叿鐐殑鏁堟灉 瑙嗚宸彃浠 scrollorama姣旇緝绠鍗 superscrollorama鑳藉仛鐨勬晥鏋滄洿澶,浣嗚鐢ㄧ涓夋柟Tween鐨勫簱,浣跨敤璧锋潵姣旇緝澶嶆潅銆 scrolldeck flash swfobj...
绛旓細鍙槸type灞炴у间笉涓鏍凤紝鍥犳鍙灏唗ype灞炴х敱text淇敼涓簆assword鍗冲彲瀹炵幇鏂囨湰妗嗗彉瀵嗙爜妗嗐傜ず渚嬪涓嬶細1銆丠TML缁撴瀯 2銆乯avascript浠ｇ爜 function fun(obj){obj.value = "";obj.type = "password";}3銆鏁堟灉婕旂ず
绛旓細瀹氭椂鍣╯etInterval
绛旓細<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> function DrawTableA(){ var td = document.getElementById("td1");for(var i=0;i<10;i++){ for(var j=0;j<7;j++){ if (((i>=1&&i...
