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 相关文章推荐
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
使用Vue生成动态表单
Nov 26 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
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 session常见问题集锦及解决办法总结
2007/03/18 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
JS命名空间的另一种实现
2013/08/09 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
js实现旋转木马效果
2017/03/17 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
js实现转动骰子模型
2019/10/24 Javascript
js实现数字滚动特效
2019/12/16 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
小学英语教师先进事迹
2014/05/28 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
七一活动主持词
2015/06/29 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers