分享通过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. StartFP

    1.INODS执行完成时间为13:06:04分, 从日志信息无法知道STARTFP执行到哪一步 从INODS执行完成时间可知道startFp执行时间为13:06:05分开始, 执行StartFP中的e ...

  2. Pi# - Raspberry Pi GPIO Library for .NET

    Project Description Pi# (pronounced “Pi Sharp”) is a library to expose the GPIO functionality of the ...

  3. js常用

    window.navigator.userAgent.toLowerCase().indexOf("msie") != -1 是否是IE浏览器

  4. C#实现JSON序列化与反序列化

    1.使用 JavaScriptSerializer类实现序列化 namespace: System.Web.Script.Serialization eg: // 序列化 private string ...

  5. Interpreter(解释器)-类行为型模式

    1.意图 给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 2.动机 如果一种特定类型的问题发生的频率足够高,那么可能就值的将该问题的各个实例表述为一个 ...

  6. css 下拉列表的制作

    圣诞节后上课就是不在状态,一整天都在神游,还感觉特别累,本来想休息休息的,结果某人看不惯我一直吃东西,非得把电脑给我打开,让整理今天所学的内容,想了一下,确实上午讲的用无序列表<ul>做的 ...

  7. java——IO流

    一. File File类可以使用文件路径字符串来创建File实例,该文件路径可以是绝对路径或相对路径 File类的list()方法中可以接收一个FilenameFilter参数,通过该参数可以只列出 ...

  8. iOS Core Animation之CALayer心得

    使用CALayer的mask实现注水动画效果 Core Animation一直是iOS比较有意思的一个主题,使用Core Animation可以实现非常平滑的炫酷动画.Core animtion的AP ...

  9. 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

    不少同学问,不都是刷新吗?还有什么区别?其实,还是有的. 其中,在地址栏按回车又分为两种情况.一是请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP ...

  10. 安装好grunt,cmd 提示"grunt不是内部或外部命令" 怎么办？

    Grunt和所有grunt插件都是基于nodejs来运行的,因此,必须安装node.js. (一) 去官网http://nodejs.org/ 下载安装包 node-v6.9.2.msi,直接点击安装 ...