jQuery 3D旋轉圖片banner切換效果代碼



139 552 185



特效描述:jQuery 3D旋轉圖片 banner切換效果,jQuery仿海風教育的師資力量頁面的banner圖片切換效果,3D旋轉木馬圖片代碼

代碼結構

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">
</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>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滑動選項卡 滑動切換 滾動切換 滾動條切換 疊加浮動層 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 層疊疊加 疊加層疊 層疊 疊加 加載更多 旋轉翻轉 旋轉 翻轉 漸隱切換 切換按鈕 淡出淡進 淡出 淡進 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片疊加 圖片層疊 圖片淡出淡進 圖片淡出 圖片淡進 圖片切換 圖片選項卡 圖標選項卡 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 純圖片輪播 圖片輪播 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子