jQuery Banner图片旋转切换特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

66 262 88



特效描述:jQuery Banner 图片旋转切换。jQuery Banner图片旋转切换特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/teachers.css">
<link rel="stylesheet" href="css/teachers.css">

2. 引入JS

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 字符编码 -->
<meta charset="utf-8">
<!-- IE兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit">
<title></title>
</head>
<!--header导航开始-->
<div  class="teachers_banner">
    <div class="container clearfix teachers_b">
        <div class="slide" id="slide">
            <ul>
                <li> <img src="images/teacher01.jpg" alt="林奇涵" title=""> </li>
                <li> <img src="images/teacher02.jpg" alt="易星晨" title=""> </li>
                <li> <img src="images/teacher03.jpg" alt="曾海阳"  title=""> </li>
                <li> <img src="images/teacher04.jpg" alt="狄俊祺"  title=""> </li>
                <li> <img src="images/teacher05.jpg" alt="仲颖鸣" title="" /> </li>
                <li> <img src="images/teacher06.jpg" alt="徐晓磊" title="" /> </li>
            </ul>
            <div class="arrow">
                <div class="prev"><</div>
                <div class="next">></div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        /*图片位置数据*/
        var datas = [
            {'z-index': 6, opacity: 1, width: 760, height: 330, top: 40, left: 0},
            {'z-index': 4, opacity: 0.6, width: 560, height: 243, top:80, left: -225},
            {'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: -170},
            {'z-index': 2, opacity: 0.2, width: 620, height: 269, top: -60, left: 110},
            {'z-index': 3, opacity: 0.4, width: 480, height: 203,  top: -10, left: 430},
            {'z-index': 4, opacity: 0.6, width: 560, height: 243, top: 80, left: 420},
        ]
        move();
        function move() {
            /*图片分布*/
            for (var i = 0; i < datas.length; i++) {
                var data = datas[i];
                $('#slide ul li').eq(i).css('z-index',data['z-index']);
                $('#slide ul li').eq(i).stop().animate(data, 1200);
            }
        }
        /*左箭头事件*/
        $('.prev').on('click', function () {
            var last = datas.pop();
            datas.unshift(last);
            move();
        })
        /*右箭头事件处理函数*/
        function nextYewu(){
            var first = datas.shift();
            datas.push(first);
            move();
        }
        /*右箭头事件*/
        $('.next').on('click', nextYewu);
        /*自动播放*/
        var timer = setInterval(function(){
            nextYewu();
        },5000);
        /*鼠标进入slide显示箭头,清除自动播放*/
        $('#slide').on({
            mouseenter: function () {
                $('.arrow').css('display', 'block');
                clearInterval(timer);
            }, mouseleave: function () {
                $('.arrow').css('display', 'none');
                /*鼠标离开时自动播放*/
                clearInterval(timer);
                timer = setInterval(function(){
                    nextYewu();
                },5000)
            }
        })
    })
</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 图片翻转旋转 图片头像上传 滑动选项卡切换 文字翻转旋转 文件上传 图片滑动 旋转木马 文本框 文字滑动 下拉框 滑动手风琴 复选 滑动星星打分 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滑动滑过 转动旋转翻转 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到