Jquery 实现grid绑定模板


Posted in Javascript onJanuary 28, 2015

网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦。一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单。不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok。

反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件。一个网站要不了几个这种效果,先实现了再说吧。最后的效果还是很高大上的。

页面+JS代码

<script type="text/javascript">

        var picCurrent = 1;

        var picTotal = 8;

        var interval; //自动运行

        function picChange(current) {

            //停止当前动画

            if ($("#divImg").is(":animated")) { $("#divImg").stop(); }

            picCurrent = current;

            //为当前选择的设置样式

            $("#divLink").find("a").removeClass("picselect")

            $("#divLink").find("a[title='" + picCurrent + "']").addClass("picselect");

            //设置下面的图片说明

            var remark = "<a href=\"images/pic" + picCurrent + ".jpg\">";

            switch (picCurrent) {

                case 1: remark += " 菊花〔拉丁学名:Dendranthema morifolium(Ramat. )Tzvel.〕,常用chrysanthemum。菊花是菊科,菊属多年生草本... "; break;

                default: remark += picCurrent + "测试说明"; break;

            }

            remark += "</a>";

            $("#picremark").html(remark);

            //运行动画

            $("#divImg").animate({ left: -((picCurrent - 1) * 1000) + "px" }, "1000");

            return false;

        }

        //暂不需使用

        function PicPer() {

            if (picCurrent > 1) {

                picCurrent--;

            }

            else {

                picCurrent = picTotal;

            }

            picChange(picCurrent);

        }

        //下一张

        function PicNext() {

            if (picCurrent == picTotal) {

                picCurrent = 1

            }

            else {

                picCurrent++;

            }

            picChange(picCurrent);

        }

        //自动切换图片

        function PicRun(functionName) {

            picChange(1);

            interval = setInterval(PicNext, "3000");

        }

        $(document).ready(function () {

            PicRun();

        });

    </script>

 
<!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>

    <title>图片切换</title>

    <script src="jquery-1.8.0.js" type="text/javascript"></script>

    <link href="picchange.css" rel="stylesheet" type="text/css" />

    </head>

<body>

    <div class="picMain">

        <div class="picimg" id="divImg">

            <img src="images/pic1.jpg" class="pic" />

            <img src="images/pic2.jpg" class="pic" />

            <img src="images/pic3.jpg" class="pic" />

            <img src="images/pic4.jpg" class="pic" />

            <img src="images/pic5.jpg" class="pic" />

            <img src="images/pic6.jpg" class="pic" />

            <img src="images/pic7.jpg" class="pic" />

            <img src="images/pic8.jpg" class="pic" />

        </div>

        <div class="picaction" id="divLink">

            <a href="images/pic8.jpg" title="8" onclick=" return picChange(8)" class="">8</a> <a href="images/pic7.jpg" title="7" onclick=" return picChange(7)">7</a> <a href="images/pic6.jpg" title="6"

                    onclick=" return picChange(6)">6</a> <a href="images/pic5.jpg" title="5" onclick=" return picChange(5)">

                        5</a> <a href="images/pic4.jpg" title="4" onclick=" return picChange(4)">4</a>

            <a href="images/pic3.jpg" title="3" onclick=" return picChange(3)">3</a> <a href="images/pic2.jpg"

                title="2" onclick=" return picChange(2)">2</a> <a href="images/pic1.jpg" title="1"

                    onclick=" return picChange(1)" class="">1</a>

        </div>

        <div id="picremark" class="picRemark">

            测试介绍文件了啊</div>

    </div>

</body>

</html>

 css的实现

.picMain

{

    margin: auto;

    overflow: hidden;

    width: 1000px;

    height: 400px;

    position: relative;

}

.picimg

{

    width: 10000px;

    height: 400px;

    background-color: #000000;

    position: absolute;

    top: 0px;

}

.picRemark

{

    position: absolute;

    width: 500px;

    height: 50px;

    bottom: 0px;

    left: 0px;

    color: #FFFFFF;

    text-indent: 2em;

}

.picRemark a

{

    color: #FFFFFF;

    text-decoration: none;

}

.picRemark a:hover

{

    text-decoration: underline;

}

.picaction

{

    position: absolute;

    width: 1000px;

    height: 50px;

    background-color: #000000;

    filter: alpha(opacity=50);

    -moz-opacity: 0.5;

    opacity: 0.5;

    overflow: auto;

    bottom: 0px;

    left: 0px;

    text-align: right;

}

.picaction a

{

    border: 1px solid #C0C0C0;

    width: 30px;

    height: 30px;

    float: right;

    line-height: 30px;

    text-decoration: none;

    text-align: center;

    color: #FFFFFF;

    font-weight: bold;

    margin-top: 10px;

    display: block;

    margin-right: 10px;

}

.pic

{

    width: 1000px;

    height: 400px;

    float: left;

}

.picselect

{

    background-color: #919191;

}
Javascript 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
Javascript控制input输入时间格式的方法
Jan 28 #Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 #Javascript
js封装可使用的构造函数继承用法分析
Jan 28 #Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 #Javascript
javascript原型链继承用法实例分析
Jan 28 #Javascript
Jquery 实现图片轮换
Jan 28 #Javascript
javascript查询字符串参数的方法
Jan 28 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
培养自己的php编码规范
2015/09/28 PHP
Yii中表单用法实例详解
2016/01/05 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
javaScript产生随机数的用法小结
2018/04/21 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python控制台实现交互式环境执行
2020/06/09 Python
python程序如何进行保存
2020/07/03 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
初中生自我鉴定
2014/02/04 职场文书
计算机软件专业求职信
2014/06/10 职场文书
路政管理求职信
2014/06/18 职场文书
学习保证书
2015/01/17 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
酒桌上的开场白
2015/06/01 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书