分享通过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:;padding:;}

html,body{height:%;}

body{background:#379EB6;}

#wrap{min-height:%;_height:%;min-width:320px;overflow:hidden;}

#imgs{position:relative;width:320px;height:568px;margin: auto;overflow:hidden;border-radius:15px;top:50px;z-index:;background:url(images/loading.gif) no-repeat center center;}

#imgs.visible{overflow:visible;}

#imgs div{overflow:hidden;}

#imgs img{width:%;height:%;display:block;}

#tssel{position:absolute;top:650px;left:%;z-index:;width:160px;margin-left:-80px;}

#navs{z-index:;position:absolute;left:%;top:225px;margin-left:180px;width:4px;}

#navs a{overflow:hidden;display:block;width:2px;height:20px;border:1px solid #fff;margin:  4px;transition:background 600ms ease;}

#navs .active{background:#fff;}

@media (max-width:540px) {

body{overflow:hidden;}

#navs{left:auto;right:10px;top:%;margin-top:-117px;}

#imgs{position:absolute;top:;width:%;height:%;margin:;border-radius:;}

#imgs img{position:absolute;top:%;left:%;-webkit-transform:translate(-%,-%);-ms-transform:translate(-%,-%);-moz-transform:translate(-%,-%);transform:translate(-%,-%);min-height:%;height:auto;}

#tssel{top:auto;bottom:10px;}

}

</style>

</head>

<body>

<div id="wrap">

    <div id="imgs">

        <div><img src="data:images/1.jpg" /></div>

        <div><img src="data:images/2.jpg" /></div>

        <div><img src="data:images/3.jpg" /></div>

        <div><img src="data:images/4.jpg" /></div>

        <div><img src="data:images/5.jpg" /></div>

        <div><img src="data:images/6.jpg" /></div>

        <div><img src="data:images/7.jpg" /></div>

        <div><img src="data:images/8.jpg" /></div>

        <div><img src="data: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[]||'flipClock',

    a=new pageSwitch('imgs',{

    duration:,

    start:,

    direction:,

    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=,op;

while(op=options[i++]){

    if(op.value===ts){

        op.selected=true;

        break;

    }

}

i=;

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>

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

  1. js自动切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js 循环切换图片

    function changeLot(){ var minIndex = 1; var maxIndex = 100; var curIndex = 10; var src = $("ul ...

  3. js动态切换图片

    <script language =javascript > $(function () { initAds(); }); function initAds() { var curInde ...

  4. js 数组切换图片

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  5. js 上下切换图片

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  6. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  7. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  8. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  9. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

随机推荐

  1. SQL语言

    SQL语言的分类:DDL DML DQL DCL SQL中的操作无非就是(增删改查) DDL:Data Query Language,数据查询语言! 主要是用来定义和维护数据库的各种操作对象,比如库. ...

  2. MySql索引简介

    从"找"到B+树 索引是用来查找的. 折半查找是一种很优秀的方式.适合于 范围查找,固有缺点就是需要元素是有序的.二叉搜索树就是对折半查找的一种基础的实现. 但二叉搜索树当遇到特殊 ...

  3. C# delegate

    1. delegate example1 class Program { public delegate int MyDelegate(int i); int MyFunc(int i) { retu ...

  4. C# 以管理员身份运行WinForm程序

    最近帮客户开发的WinForm客户端,部分在使用的过程中,会出现“系统文件找不到”的错误提示. 调试后,确定为程序在操作配置文件时,系统权限引起的错误,直接管理员权限运行就正常了. 考虑用户操作的便利 ...

  5. A. Writing Code 完全背包

    http://codeforces.com/contest/543/problem/A 一开始这题用了多重背包做,结果有后效性. 就是如果6,这样拆分成 1 + 2 + 3的,那么能产生3的就有两种情 ...

  6. history对象的一些知识点

    history对象可以保存用户的上网的历史记录,即从窗口被打开的那一刻算起.这里有个比较纠结的问题,出于安全因素的考虑,开发人员无法得知用户浏览过的URL, 只能通过用户访问过的页面列表,实现后退和前 ...

  7. [转]反向ajax项目

      ASP.NET WebSocket & Comet Ajax Library (Reverse Ajax - Server Push) 项目链接:http://pokein.codeple ...

  8. oracle pl/sql split函数

    在软件开发过程中程序员经常会遇到字符串的拼接和拆分工作. 以java开发为例: 前台传入字符串拼接形式的一个JSON数据,如:"1001,1002,1003",这可能代表了一组序号 ...

  9. 强连通分量的一二三 | | JZOJ【P1232】 | | 我也不知道我写的什么

    贴题: 在幻想乡,上白泽慧音是以知识渊博闻名的老师.春雪异变导致人间之里的很多道路都被大雪堵塞,使有的学生不能顺利地到达慧音所在的村庄.因此慧音决定换一个能够聚集最多人数的村庄作为新的教学地点.人间之 ...

  10. JAVA可移植性广泛应用

    一.JAVA作为一种编程语言:源代码可移植性 作为一种编程语言,JAVA提供了一种最简单同时也是人们最熟悉的可移植性–源代码移植.这意味着任意一个JAVA程序,不论它运行在何种CPU.操作系统或JAV ...