Jquery 自动轮播图，可触摸位置转换，点击左右转换

最新推荐文章于 2021-09-20 21:37:48 发布
最新推荐文章于 2021-09-20 21:37:48 发布
阅读量225 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jack_rose_me/article/details/109045484
版权 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自动轮播 Jquery</title>

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

    <script>

    $(function () {



        //动态添加数字浮标

        var imgNum = $(".img li").size();

        for (var i = 1; i <= imgNum; i++) {

            $(".num").append("<li>" + i + "</li>");

        }



        $(".img li").eq(0).fadeIn(300);

        $(".num li").eq(0).addClass("active");



        //数字浮标的焦点事件

        $(".num li").mousemove(function () {

            if (!$(this).hasClass("active")) {

                $(this).addClass("active").siblings().removeClass("active");

                idx = $(this).index();

                $(".img li").eq(idx).stop().fadeIn(300).siblings().stop().fadeOut(300);

            }

        });



        //显示向左移动图标

        $(".shade_left").hover(function () {

            $(".out .left").stop().fadeIn();

        }, function () {

            $(".out .left").stop().fadeOut();

        });



        //显示向右移动图标

        $(".shade_right").hover(function () {

            $(".out .right").stop().fadeIn();

        }, function () {

            $(".out .right").stop().fadeOut();

        });



        //转移图片的a标签的click事件

        $(".shade").click(function () {

            location.href = $(".img li:visible a").attr("href");

        });



        //手动向左移动

        $(".out .btn.left").click(function (e) {

            move(-1);

            e.stopPropagation();

        });

        //手动向右移动

        $(".out .btn.right").click(function (e) {

            move();

            e.stopPropagation();

        });



        //自动轮播

        var idx = 0;

        var timer = setInterval(move, 1000);

        function move(left) {

            if (left) { //向左移动

                idx--;

                if (idx == -1) {

                    idx = imgNum - 1;

                }

            } else {

                idx++;

                if (idx == imgNum) {

                    idx = 0;

                }

            }

            $(".num li").eq(idx).addClass("active").siblings().removeClass("active");

            $(".img li").eq(idx).stop().fadeIn(300).siblings().stop().fadeOut(300);

        }



        //图片获取焦点时，停止自动轮播

        $(".out").hover(function () {

            clearInterval(timer);

        }, function () {

            timer = setInterval(move, 1000);

        });

    });



    </script>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        img {

            width: 800px;

            height: 600px;

        }

        ul li {

            list-style: none;

        }

        .out {

            margin: 50px auto;

            width: 800px; 

            height: 600px;

            position: relative;

        }

        .out .shade {

            position: absolute;

            top: 0;

            width: 50%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0);/*不能使用opacity，不然会被子元素继承(会忽视子元素所设置的background-color: opacity)*/

            /*pointer-events: auto;*/

        }

        .out .shade_left {

            left: 0;

        }

        .out .shade_right {

            right: 0;

        }

        .out .img li {

            position: absolute;

            top: 0;

            left: 0;

            display: none;

            /*pointer-events: none; //该层会将事件会传给下面一个层（z-index小于他的层） */

        }

        .out .num {

            position: absolute;

            font-size: 0;

            bottom: 10px;

            width: 100%;

            text-align: center;

        }

        .out .num li {

            width: 20px;

            height: 20px;

            background-color: #777;

            color: #fff;

            line-height: 20px;

            text-align: center;

            -webkit-border-radius: 50%;

            -moz-border-radius: 50%;

            border-radius: 50%;

            display: inline-block;

            font-size: 13px;

            margin: 0 3px;

            cursor: pointer;

        }

        .out .num li.active {

            background-color: #b92c28;

        }

        .out .btn {

            position: absolute;

            top: 50%;

            margin-top: -50px;

            color: #fff;

            height: 100px;

            line-height: 100px;

            width: 50px;

            background-color: rgba(0, 0, 0, 0.2);

            font-size: 40px;

            text-align: center;

            cursor: pointer;

            display: none;

        }

        .out .left {

            left: 0;

        }

        .out .right {

            right: 0;

        }

    </style>

</head>

<body>



    <div class="out">



        <ul class="img">

            <li><a href="https://www.baidu.com/"><img src="御湖城01.jpg" alt=""></a></li>

            <li><a href=""><img src="御湖城02.jpg" alt=""></a></li>

            <li><a href=""><img src="御湖城03.jpg" alt=""></a></li>

            <li><a href=""><img src="御湖城04.jpg" alt=""></a></li>

            <li><a href=""><img src="御湖城05.jpg" alt=""></a></li>

        </ul>



        <div class="shade shade_left">

            <div class="left btn"><</div>

        </div>

        <div class="shade shade_right">

            <div class="right btn">></div>

        </div>



        <ul class="num"></ul>

    </div>



</body>

</html>

 

林间风雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery点击按钮轮播换图
sofewave_hand_LI的博客
10-24 327
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!-- 图片的本地文件的位置--> &lt.
JQuery 轮播图可左右切换
无论何时都不要停止学习，这是改变自己的必要条件
02-04 1025
效果如下图: Html: <!DOCTYPE html> <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title...
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
11-17
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
基于jQuery的移动轮播图（支持触屏）
weixin_33681778的博客
04-02 150
移动轮播图我看到两款， 一款是无线天猫的m.tmall.com，实现了无缝轮播。 一款是蘑菇街的，没有实现无缝轮播。 我自己重写一个，类似蘑菇街 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;基于jQu
jQuery实现左右切换轮播图
JackieDYH的博客
04-24 1492
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .wrap{ position: relat...
jquery实现轮播图，可点击左右切换
Denghalou的博客
08-19 8980
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> * { padding: 0; margin: 0; m...
使用jQuery，写一个简单的轮播图，实现切换功能！
qq_44890362的博客
09-20 1183
1.谈到jquery，想必大家都知道，它是一个js库。使用起来简单又方便，接下来就给大家看看我用jquery实现的轮播图吧！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
jQuery实现的自定义轮播图功能详解
10-17
jQuery实现的自定义轮播图是一种常见的网页动态效果，用于展示多张图片或内容，通常用于首页或者产品展示页面。相较于使用第三方轮播插件，自定义轮播图有以下几个优势： 1. **功能全面**：可以根据需求定制各种...
jQuery自适应窗口大小轮播图特效
11-04
jQuery自适应窗口大小轮播图特效是一种常见的网页交互设计，广泛应用于网站的首页展示、产品介绍等场景。这种特效能够根据浏览器窗口的尺寸变化自动调整布局，确保在不同设备和屏幕分辨率下都能提供良好的视觉体验。...
三维效果jquery图片轮播特效.zip
07-11
2. **事件处理**：轮播通常需要响应用户的点击或触摸事件，如切换到下一张或上一张图片。jQuery的`.on()`方法可以绑定这些事件，并定义相应的处理函数。 3. **动画效果**：实现“三维”效果可能涉及到元素的位移、...
jQuery不同风格图片排列轮播切换
04-07
在实现图片轮播切换时，jQuery的选择器能快速定位到图片元素，而其动画API则可轻松创建过渡效果。 ### CSS3与动画 CSS3是CSS的最新版本，引入了许多新的特性和功能，如选择器、边框半径、渐变、阴影、转换...
随机特效轮播图,自动轮播,随机特效
01-20
在IT行业中，轮播图是一种常见的网页元素，用于展示多张图片或内容并实现自动轮换的效果，以吸引用户注意力并提高用户体验。本项目聚焦于"随机特效轮播图"，这种轮播图不仅具备自动轮播功能，还增加了各种随机特效，...
用jquery实现带左右按键的轮播图
liudanyang_21的博客
08-18 794
成品如下： 简单来说就是点击“右”按钮时，转换到右边的下一幅图片，同时上面的小方块颜色也跟着改变，如果已经是最后一幅图片，再点击“右”，则转换到第一幅图片，是直接向左移找到第一幅图的，明天再做一下无缝切换的效果，即最后一幅图放完了以后第一幅图从右滑进来跟上。点击“左”同理。 下面是html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
图片轮播——从右向左滑动
qq_41985171的博客
10-16 3957
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #div1{ width: 1200
JQuery实现图片自动轮播左右切换鼠标移入
词不达意难知的博客
08-03 3096
首先 轮播的精髓就是在于图片的平滑滚动，下面图片应该能一下就看明白； 第一 我们将可视区控制在我们想呈现的内容的大小 第二 接着是在可视区内放入内容（图片）； 第三 JQ效果实现 ， 中下方小圆点（按钮移入切换事件）； 图片左右两侧点击切换事件； 自动播放事件； 移入图片终止播放移出开启播放； css 以及 html 展示 <style> * { ...
jquery基础（十）
hongluk的专栏
10-22 492
<br />Built-in Effects<br />Frequently used effects are built into jQuery as methods:$.fn.show<br />Show the selected element.$.fn.hide<br />Hide the selected elements.$.fn.fadeIn<br />Animate the opacity of the selected elements to 100%.$.fn.fadeOut<br />
html5淡出淡入的翻页效果,jQuery实现的淡入淡出图片轮播效果示例
weixin_36170641的博客
06-03 351
本文实例讲述了jQuery实现的淡入淡出图片轮播效果。分享给大家供大家参考，具体如下：1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致)css部分：* {padding: 0;margin:0;}ul {list-style: none;}.out {width: 640px;height: 270px;margin:50px auto;position: relative;}.ou...
Html之实例练习（轮播图片、放大镜效果、面板拖动）
Viewinfinitely的博客
05-19 1049
文章目录一、轮播图片二、放大镜效果三、面板拖动 本篇将简单演示一下HTML里的轮播图片、放大镜效果和面板拖动的实例，代码已经打包好，需要参考的请自行下载 一、轮播图片 1、效果图 2、JS核心部分 <script> //用一个全局变量，来保存当前轮播到图片（圆点）的索引 var i=0; //通过jquery自动创建按钮标签 var img_num=$(".img li").length; //获取图片数量 //循环将每一个小圆圈加到ul里面 f
jquery页面加载完成后执行方法的几种方式
jack_rose_me的博客
11-02 9711
1、$(function(){ 　　$("#a").click(function(){ 　　　　//adding your code here 　　}); }); 2、$(document).ready(function(){ 　　$("#a").click(function(){ 　　　　//adding your code here　　 　　}); }); 3、window.onload = function(){ 　　$("#a").click(function(){ 　　　　...
jquery实现 弹出层效果
jack_rose_me的博客
04-15 1968
jQuery实现 弹出层效果 点击弹出层：弹出弹出层 点击阴影：关闭弹出层 点击“关闭”关闭弹出层 整体代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery弹...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值