84JS插件:jQuery版轮播图

一、代码分两个部分:1、HTML部分,根据注释处理即可;2、基于jQuery的play.js插件部分,这里为了展示效果,直接写在<html></html>下的<script></script>标签里。3、效果包含:自动轮播,焦点对齐,前进后退,直走不返,鼠标进入、轮播停止且前进后退图标出现,鼠标离开、轮播重启且前进后退图标隐藏。4、这里可以预览效果。二、轮播图原理说明:(1)轮播图(假设)有7张图片,“一”字排列,把第1张图片复制一次,放到第8张的位置,这样共有8张图片;轮播开始后,(2)整个第2秒内,第2张图片从开始出现到完全出现,耗时700毫秒,完全出现后再停留300毫秒;(3)整个第3秒内,第3张图片从开始出现到完全出现,耗时700毫秒,完全出现后再停留300毫秒;以此类推(4)整个第8秒内,第8张图片从开始出现到完全出现,耗时700毫秒,完全出现后再停留300毫秒;注意(5)整个第9秒内,轮播图急速回到第1张图片完全出现的状态,耗时约0毫秒(即运行autoMove方法中if语句块的耗时),然后立即开始(2)步骤。三、也可以用命名空间的方式进行扩展:<script>    $.myPlugin = { banner: function (width, height) {----插件代码---- } };</script><script>    $.myPlugin.banner(‘500px‘, ‘250px‘);</script>

```html:run<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>/*style标签及其内的内容,在实际项目中可以不要*/    * {        margin: 0;        padding: 0;    }    </style></head><body><!--body标签里的内容,没说可以增减或更改的,不要增减或更改--><div id="box">    <div>        <!--以下是可增减区域-->        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" /></div>        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" /></div>        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" />        </div>        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" />        </div>        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" />        </div>        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" />        </div>        <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" />        </div>        <!--以上是可增减区域-->    </div></div></body></html><script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script><script>    (function($){        $.fn.extend({            banner: function (width, height) {                var $oBox = $("#box");                /*以下最外层div*/                $oBox.css({                    "height": height,                    "width": width,                    "margin": "0 auto",                    "overflow": "hidden",                    "position": "relative"                });                /*以下轮播区的div*/                var $oBoxInner = $oBox.children(‘div‘);                var aDiv = $oBoxInner[0].innerHTML;                /* 轮播区内部原来的值*/                var aDiv0 = $oBoxInner.children(‘div‘)[0].outerHTML;                /*第一个轮播图片的外部*/                $oBoxInner.html(aDiv + aDiv0);                /* 用jQuery的方法给轮播区内部重新赋值*/                var $width = parseFloat(width) * $oBoxInner.children(‘div‘).length + "px";                $oBoxInner.css({                    "height": height,                    "width": $width,                    "position": "absolute",                    "left": 0,                    "right": 0,                    "float": "left"                });                $oBoxInner = $oBox.children(‘div‘);                var $aDiv = $oBoxInner.children("div");                $aDiv.css({"width": width, "height": height, "float": "left"});                $aDiv.children(‘img‘).css({"width": "100%", "height": "100%"});                /*以下是焦点区部分(定位在轮播区的右下方)*/                $oBox.append("<ul></ul>");                var $ul = $oBox.children("ul");                var $li = "";                $aDiv.each(function (index) {                    if (index < $aDiv.length - 1) {                        $li += ‘<li></li>‘;                    }                });                $ul.append($li);                $ul = $oBox.children("ul");                $ul.css({"position": "absolute", "right": "10px", "bottom": "10px"});                $li = $ul.children("li");                $li.css({                    "width": "18px",                    "height": "18px",                    "float": "left",                    "listStyle": "none",                    "background": "green",                    "borderRadius": "50%",                    "marginLeft": "10px",                    "cursor": "pointer"                });                /*以下是向左向右两个箭头式按钮*/                var $a = "<a href = ‘javascript:;‘></a><a href = ‘javascript:;‘></a>";                $oBox.append($a);                /*以下是左按钮(点击它,图片向左运动)*/                var $oBtnL = $oBox.children(‘a‘).eq(0);                $oBtnL.css({                    "width": "30px",                    "height": "30px",                    "position": "absolute",                    "top": (parseFloat(height) / 2 - 15) + "px",                    "left": "30px",                    "border": "10px solid red",                    "borderLeft": "none",                    "borderBottom": "none",                    "opacity": 0.6,                    "filter ": "alpha(opacity=60)",                    "display": "none",                    "transform": "rotate(-135deg)"                });                $oBtnL.click(function () {                    if ($step <= 0) {                        $step = $aDiv.length - 1;                        $oBoxInner.css(‘left‘, -$step * parseFloat(width));                    }                    $step--;                    $oBoxInner.animate({left: -$step * parseFloat(width)});                    $bannerTip();                });                /*以下是右按钮(点击它,图片向右运动)*/                var $oBtnR = $oBox.children(‘a‘).eq(1);                $oBtnR.css({                    "width": "30px",                    "height": "30px",                    "position": "absolute",                    "top": (parseFloat(height) / 2 - 15) + "px",                    "right": "30px",                    "border": "10px solid red",                    "borderLeft": "none",                    "borderBottom": "none",                    "opacity": 0.6,                    "filter": "alpha(opacity=60)",                    "display": "none",                    "transform": "rotate(45deg)"                });                $oBtnR.click(function () {                    if ($step >= $aDiv.length - 1) {                        $step = 0;                        $oBoxInner.css(‘left‘, 0)                    }                    $step++;                    $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000);                    $bannerTip();                });

                var $step = 0;//记录每次运动                var $timer = null;//定时器                $init();//初始化轮播图                function $init() {                    /*1.开启自动轮播*/                    $timer = setInterval(function () {                        $autoMove();                    }, 2000);                    /*2.开启焦点,每个焦点与每张轮播图对应*/                    $bannerTip();                    /*3.鼠标移入轮播区,轮播暂停;鼠标移出轮播区,轮播恢复*/                    $over_out();                }

                $li.each(function (index) {                    $(this).on(‘click‘, function () {                        $step = index;                        $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000);                        $bannerTip();                    })                });

                function $autoMove() {                    if ($step >= $aDiv.length - 1) {                        $step = 0;                        $oBoxInner.css(‘left‘, 0)                    }                    $step++;                    $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000);                    $bannerTip();                }

                function $bannerTip() {                    var tmpStep = $step >= $li.length ? 0 : $step;                    $li.each(function (index) {                        $li.eq(index).attr("class",index === tmpStep ? ‘on‘ : null);                        if ($li.eq(index).attr("class") === "on") {                            $li.eq(index).css("background","red");                        } else {                            $li.eq(index).css("background","green");                        }                    })                }

                function $over_out() {                    $oBox.mouseover(function () {                        clearInterval($timer);                        $oBtnL.css({"display": "block"});                        $oBtnR.css({"display": "block"});                    });                    $oBox.mouseout(function () {                        $timer = setInterval(function () {                            $autoMove()                        }, 2000);                        $oBtnL.css({"display": "none"});                        $oBtnR.css({"display": "none"});                    });                }            }        })    })(jQuery)</script><script>    $("#box").banner(‘500px‘, ‘250px‘);</script>```

原文地址:https://www.cnblogs.com/gushixianqiancheng/p/10967124.html

时间: 2024-10-15 07:28:14

84JS插件:jQuery版轮播图的相关文章

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

jQuery实现轮播图

我用的jQuery库jquery-3.2.1.js可以在官网下载:http://jquery.com/download/ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

使用jQuery实现轮播图

一共6张图片,每1.5m自动切换播放图片,鼠标在图片内则停止自动播放.可通过底部列表手动播放图片,也可通过图片两侧按钮手动点击切换图片.效果图如下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <script src="https://libs.baidu.co

jQuery无缝轮播图思路详解-唯品会

效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap"> <!--大盒子上部分轮播图--> <div class="wrapUp"> <ul> <li class="cur"><a href="#"><img src="i

Jquery 实现轮播图

jq 轮播图 function banner_show(){ var left_btn = $("#banner_tag_left"); //获取左侧单击按钮 var right_btn = $("#banner_tag_right"); //获取右侧点击按钮 var Owidth = $("#banner ul li").width(); //获取单个图片宽度 var Oindex = $("#banner ul li");

移动版轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新型轮播图</title> <link rel="stylesheet" href="index.css"> *{ margin:0px; padding: 0px; } .lunbo{ width: 1000

jquery 广告轮播图

轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * 2.3鼠标滑过按钮,按钮颜色加深 * 3底部的导航点 * 3.1图片为第几张时,点在那第几张 * 3.2鼠标滑到第几个点,图片切换到第几张 * 4图片自动轮播 * 4.1默认自动下一张 * 4.2鼠标在图片范围时,停止切换 * 4.3鼠标离开图片范围,恢复自动切换 * 5鼠标放在图片范围时,变为小手

进阶版轮播图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } li{ list-style: none; } body{ background: #CCCCCC; } #box{ width: 400px;

jquery - 导航轮播图

1,slider.js /** * slider插件可悬停控制 */ ; $(function ($, window, document, undefined) { Slider = function (container, options) { /* options = { auto: true, time: 3000, event: 'hover' | 'click', mode: 'slide | fade', controller: $(), activeControllerCls: '