分享通过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. (转)myeclipse插件—SVN分支与合并详解【图】

    svn作为版本控制软件被广泛用于众多公司的开发团队中,最多的场景就是一个项目上传svn后,一个组内的小伙伴在上边提交和更新代码以及解决冲突,其实这只是发挥了svn的很小的一部分功能. 先稍微介绍一下s ...

  2. LeetCode OJ 106. Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  3. 游戏中的人工智能——初探AI

    一.游戏中的人工智能 让游戏具有挑战性: 让游戏好玩的关键因素是为之找到合适的难度等级: 人工智能在游戏中的作用是通过提供富有挑战性的竞争对象来让游戏更好玩,而在游戏中行动逼真的非玩家角色(NPC), ...

  4. js 日期对象Date以及传参

    创建一个日期对象,日期对象可传参new Date() 创建日期对象getFullYear() 获取年份 getMonth() 获取月份 返回值是 0(一月) 到 11(十二月) 之间的一个整数 get ...

  5. java_js从字符串中截取数字

    var str="1件*20桶*30包*123.45公斤"; var res=str.match(/\d+(\.\d+)?/g); alert(res);

  6. MessageDigest消息摘要

    <1>MessageDigest基础 MessageDigest 类为应用程序提供信息摘要算法的功能,如 MD5 或 SHA 算法. MessageDigest 对象开始被初始化.该对象通 ...

  7. flash中htmlText样式

    赋值htmlText时,htmlText中指定了样式的按指定样式显示,没有指定的按该文本的默认样式显示. PS:flash软件拖出来的文本,在赋值htmlText的时候该文本原有样式会失效,而new出 ...

  8. Java 基本数据类型（新手必看资料）

    变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. 因此,通过定义不同类型的变量,可以在内存 ...

  9. 《Linux多线程服务端编程：使用muduo C++网络库》上市半年重印两次，总印数达到了9000册

    <Linux多线程服务端编程:使用muduo C++网络库>这本书自今年一月上市以来,半年之内已经重印两次(加上首印,一共是三次印刷),总印数达到了9000册,这在技术书里已经算是相当不错 ...

  10. C++写一个带参数运行的程序

    #include <string.h>#include <iostream>#include <cstdlib>using namespace std; int m ...