分享通过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. ROC曲线、AUC、Precision、Recall、F-measure理解及Python实现

    本文首先从整体上介绍ROC曲线.AUC.Precision.Recall以及F-measure,然后介绍上述这些评价指标的有趣特性,最后给出ROC曲线的一个Python实现示例. 一.ROC曲线.AU ...

  2. [转载] 纯手打 第一篇：安装配置gradle

    本文转载自: http://www.cnblogs.com/uncle2000/p/4276833.html 一个bug 一个脚印的叫你们用gradle. 1介于网络上的很多资料都是老的 不适用与现在 ...

  3. KeepAlived主备模型高可用LVS

    部署前准备: 1.至少4台主机:两个Director(HA1,HA2),两个Real Server(RS1,RS2) 2.Director之间时间必须同步,且关闭各主机的防火墙和Selinux 3.出 ...

  4. Android遍历获取Office格式（Word，Excel，PPT，PDF）的文件并打开

    此案例主要是模仿QQ加载WPS(Word,Excel,PPT)本地文件可打开查看,使用ListView加载,使用线程扫描SD卡下所有目录加载指定的Word,Excel,PPT等格式的文件,ListVi ...

  5. 关于Linux x64 Oracle JDK7u60 64-bit HotSpot VM 线程栈默认大小问题的整理

    JVM线程的栈默认大小,oracle官网有简单描述: In Java SE 6, the default on Sparc is 512k in the 32-bit VM, and 1024k in ...

  6. NPOI 2.0版本的使用

    详细教程: http://blog.csdn.net/xxs77ch/article/details/50216033 using System; using System.Collections.G ...

  7. c++ cout介绍与实现自己的cout

    C++编程语言互换流中的标准输出流,需要iostream支持.读为 "c out([si:‘aʊt]". 名字 cout 类型 std::ostream 读为 "c ou ...

  8. 全基因组关联分析（Genome-Wide Association Study，GWAS）流程

    全基因组关联分析流程: 一.准备plink文件 1.准备PED文件 PED文件有六列,六列内容如下: Family ID Individual ID Paternal ID Maternal ID S ...

  9. 2016CCPC 合肥--最大公约数//每一年通向它的路上，多少人折戟沉沙，多少人功败垂成，有人一战成名，有人从头再来。

    有这样一个有关最大公约数的函数:函数 f(x, y): { c=0 当 y>0: { c +=1 t = x % y x = y y = t } 返回 c * x * x} 给出三个正整数n,m ...

  10. 第四十章 微服务CICD（2）- jenkins（war版）

    一.下载 官网下载war包,放在tomcat下的webapps下, 第一章 tomcat安装与启动 第二章 部署war包到tomcat jenkins:2.19.1版本. 二.修改编码为utf-8 在 ...