js多种切换图片

分享通过js实现多种图片切换特效，这里只有手动切换哦，自动效果需自写，效果地址：http://dwz.cn/1drD5u。

下载地址：http://www.w2bc.com/download/index/52209

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
<style type="text/css">
body,div{margin:0;padding:0;}
html,body{height:100%;}
body{background:#379EB6;}
#wrap{min-height:100%;_height:100%;min-width:320px;overflow:hidden;}
#imgs{position:relative;width:320px;height:568px;margin:0 auto;overflow:hidden;border-radius:15px;top:50px;z-index:1;background:url(images/loading.gif) no-repeat center center;}
#imgs.visible{overflow:visible;}
#imgs div{overflow:hidden;}
#imgs img{width:100%;height:100%;display:block;}
#tssel{position:absolute;top:650px;left:50%;z-index:10;width:160px;margin-left:-80px;}
#navs{z-index:10;position:absolute;left:50%;top:225px;margin-left:180px;width:4px;}
#navs a{overflow:hidden;display:block;width:2px;height:20px;border:1px solid #fff;margin:0 0 4px;transition:background 600ms ease;}
#navs .active{background:#fff;}
@media (max-width:540px) {
body{overflow:hidden;}
#navs{left:auto;right:10px;top:50%;margin-top:-117px;}
#imgs{position:absolute;top:0;width:100%;height:100%;margin:0;border-radius:0;}
#imgs img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);min-height:100%;height:auto;}
#tssel{top:auto;bottom:10px;}
}
</style>
</head>
<body>
<div id="wrap">
    <div id="imgs">
        <div><img src="images/1.jpg" /></div>
        <div><img src="images/2.jpg" /></div>
        <div><img src="images/3.jpg" /></div>
        <div><img src="images/4.jpg" /></div>
        <div><img src="images/5.jpg" /></div>
        <div><img src="images/6.jpg" /></div>
        <div><img src="images/7.jpg" /></div>
        <div><img src="images/8.jpg" /></div>
        <div><img src="images/9.png" /></div>
    </div>
    <div id="navs"><a href="javascript:;" class="active"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div>
    <select id="tssel">
        <option value="">选择切页效果</option>
        <option value="fade">fade</option>
        <optgroup label="滚动效果">
            <option value="scroll">scroll</option>
            <option value="scroll3d">scroll3d</option>
            <option value="scrollCover">scrollCover</option>
            <option value="scrollCoverReverse">scrollCoverReverse</option>
            <option value="scrollCoverIn">scrollCoverIn</option>
            <option value="scrollCoverOut">scrollCoverOut</option>
            <option value="scrollX">scrollX</option>
            <option value="scroll3dX">scroll3dX</option>
            <option value="scrollCoverX">scrollCoverX</option>
            <option value="scrollCoverReverseX">scrollCoverReverseX</option>
            <option value="scrollCoverInX">scrollCoverInX</option>
            <option value="scrollCoverOutX">scrollCoverOutX</option>
            <option value="scrollY">scrollY</option>
            <option value="scroll3dY">scroll3dY</option>
            <option value="scrollCoverY">scrollCoverY</option>
            <option value="scrollCoverReverseY">scrollCoverReverseY</option>
            <option value="scrollCoverInY">scrollCoverInY</option>
            <option value="scrollCoverOutY">scrollCoverOutY</option>
        </optgroup>
        <optgroup label="滑动效果">
            <option value="slide">slide</option>
            <option value="slideCover">slideCover</option>
            <option value="slideCoverReverse">slideCoverReverse</option>
            <option value="slideCoverIn">slideCoverIn</option>
            <option value="slideCoverOut">slideCoverOut</option>
            <option value="slideX">slideX</option>
            <option value="slideCoverX">slideCoverX</option>
            <option value="slideCoverReverseX">slideCoverReverseX</option>
            <option value="slideCoverInX">slideCoverInX</option>
            <option value="slideCoverOutX">slideCoverOutX</option>
            <option value="slideY">slideY</option>
            <option value="slideCoverY">slideCoverY</option>
            <option value="slideCoverReverseY">slideCoverReverseY</option>
            <option value="slideCoverInY">slideCoverInY</option>
            <option value="slideCoverOutY">slideCoverOutY</option>
        </optgroup>
        <optgroup label="裁切效果">
            <option value="slice">slice</option>
            <option value="sliceX">sliceX</option>
            <option value="sliceY">sliceY</option>
        </optgroup>
        <optgroup label="缩放效果">
            <option value="zoom">zoom</option>
            <option value="zoomCover">zoomCover</option>
            <option value="zoomCoverReverse">zoomCoverReverse</option>
            <option value="zoomCoverIn">zoomCoverIn</option>
            <option value="zoomCoverOut">zoomCoverOut</option>
            <option value="zoomX">zoomX</option>
            <option value="zoomCoverX">zoomCoverX</option>
            <option value="zoomCoverReverseX">zoomCoverReverseX</option>
            <option value="zoomCoverInX">zoomCoverInX</option>
            <option value="zoomCoverOutX">zoomCoverOutX</option>
            <option value="zoomY">zoomY</option>
            <option value="zoomCoverY">zoomCoverY</option>
            <option value="zoomCoverReverseY">zoomCoverReverseY</option>
            <option value="zoomCoverInY">zoomCoverInY</option>
            <option value="zoomCoverOutY">zoomCoverOutY</option>
        </optgroup>
        <optgroup label="扭曲效果">
            <option value="skew">skew</option>
            <option value="skewCover">skewCover</option>
            <option value="skewCoverReverse">skewCoverReverse</option>
            <option value="skewCoverIn">skewCoverIn</option>
            <option value="skewCoverOut">skewCoverOut</option>
            <option value="skew">skewX</option>
            <option value="skewCoverX">skewCoverX</option>
            <option value="skewCoverReverseX">skewCoverReverseX</option>
            <option value="skewCoverInX">skewCoverInX</option>
            <option value="skewCoverOutX">skewCoverOutX</option>
            <option value="skewY">skewY</option>
            <option value="skewCoverY">skewCoverY</option>
            <option value="skewCoverReverseY">skewCoverReverseY</option>
            <option value="skewCoverInY">skewCoverInY</option>
            <option value="skewCoverOutY">skewCoverOutY</option>
        </optgroup>
        <optgroup label="翻转效果">
            <option value="flip">flip</option>
            <option value="flip3d">flip3d</option>
            <option value="flipClock">flipClock</option>
            <option value="flipPaper">flipPaper</option>
            <option value="flipCover">flipCover</option>
            <option value="flipCoverReverse">flipCoverReverse</option>
            <option value="flipCoverIn">flipCoverIn</option>
            <option value="flipCoverOut">flipCoverOut</option>
            <option value="flipX">flipX</option>
            <option value="flip3dX">flip3dX</option>
            <option value="flipClockX">flipClockX</option>
            <option value="flipPaperX">flipPaperX</option>
            <option value="flipCoverX">flipCoverX</option>
            <option value="flipCoverReverseX">flipCoverReverseX</option>
            <option value="flipCoverInX">flipCoverInX</option>
            <option value="flipCoverOutX">flipCoverOutX</option>
            <option value="flipY">flipY</option>
            <option value="flip3dY">flip3dY</option>
            <option value="flipClockY">flipClockY</option>
            <option value="flipPaperY">flipPaperY</option>
            <option value="flipCoverY">flipCoverY</option>
            <option value="flipCoverReverseY">flipCoverReverseY</option>
            <option value="flipCoverInY">flipCoverInY</option>
            <option value="flipCoverOutY">flipCoverOutY</option>
        </optgroup>
        <optgroup label="爆炸效果">
            <option value="bomb">bomb</option>
            <option value="bombCover">bombCover</option>
            <option value="bombCoverReverse">bombCoverReverse</option>
            <option value="bombCoverIn">bombCoverIn</option>
            <option value="bombCoverOut">bombCoverOut</option>
            <option value="bombX">bombX</option>
            <option value="bombCoverX">bombCoverX</option>
            <option value="bombCoverReverseX">bombCoverReverseX</option>
            <option value="bombCoverInX">bombCoverInX</option>
            <option value="bombCoverOutX">bombCoverOutX</option>
            <option value="bombY">bombY</option>
            <option value="bombCoverY">bombCoverY</option>
            <option value="bombCoverReverseY">bombCoverReverseY</option>
            <option value="bombCoverInY">bombCoverInY</option>
            <option value="bombCoverOutY">bombCoverOutY</option>
        </optgroup>
    </select>
</div>
<script type="text/javascript" src="js/pageSwitch.js"></script>
<script>
var reg=location.search.match(/ts=([^&]*)/),
    ts=reg&&reg[1]||‘flipClock‘,
    a=new pageSwitch(‘imgs‘,{
    duration:1000,
    start:0,
    direction:1,
    loop:true,
    ease:/flip(?!Paper)/.test(ts)?‘bounce‘:‘ease‘,
    transition:ts,
    mouse:true,
    mousewheel:true,
    arrowkey:true
}),
navs=document.getElementById(‘navs‘).getElementsByTagName(‘a‘);

a.on(‘before‘,function(m,n){
    navs[m].className=‘‘;
    navs[n].className=‘active‘;
});

if(/^(?:scroll3d|flip)/.test(ts)){
    document.getElementById(‘imgs‘).className=‘visible‘;
}

document.getElementById(‘tssel‘).onchange=function(){
    location.href=‘?ts=‘+this.value;
}

var options=document.getElementById(‘tssel‘).options,
    i=0,op;
while(op=options[i++]){
    if(op.value===ts){
        op.selected=true;
        break;
    }
}

i=0;
for(;i<navs.length;i++){
    !function(i){
        navs[i].onclick=function(){
            a.slide(i);
        }
    }(i);
}
</script>

    <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
</body>
</html>
时间： 2024-10-07 22:10:36

js多种切换图片的相关文章

JS定时器切换图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js 数组切换图片

<html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var img=document.getElementById('img'); var num=0; var a=['img/16.jpg','img/2.jpg','im

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

【转】Android android listview的HeadView左右切换图片（仿新浪，网易，百度等切换图片）

首先我们还是看一些示例:(网易,新浪,百度)      下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个view怎么做,就要根据自己的喜爱了,实现有多种方法,下面我简单介绍一下. 第一种:ViewFlipper+GestureDetector 主布局就是一个listview,这里就不介绍了,我介绍下切换图片布局head_iamge.xml 1 <span style="font-size:12px;&

JQury自动切换图片

[标签]Jquery图片自动切换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=&

jQuery演示10种不同的切换图片列表动画效果

经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE html> <html lang="en" class="no-

android listview的HeadView左右切换图片（仿新浪，网易，百度等切换图片）

首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理. 下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个view怎么做,就要根据自己的喜爱了,实现有多种方法,下面我简单介绍一下. 第一种:ViewFlipper+GestureDetector 主布局就是一个li

jQuery箭头切换图片 - 学习笔记

jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z):        x 代表横向坐标移向量的长度       y 代表纵向坐标移向量的长度       z 代表Z轴移向量的长度 取值不可为百 scale() 缩放 transform-origin:0 50%:        top left | left top 等价于 0 0       top | top center | center top 等价于 50% 0   

H5+CSS3实现手指滑动切换图片

包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <m