jquery自动滚动切换特效代码（html滚动效果代码）[20240430更新]

本篇文章给大家谈谈jquery自动滚动切换特效代码，以及html滚动效果代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Jquery幻灯片特效代码分享--鼠标滑过按钮时切换（2）
• 2、怎么在这个JQ轮播上加自动滚动
• 3、Jquery的Tabs内容轮换效果实现代码,几行搞定
• 4、怎么用jquery实现图片上一张下一张效果？ 注：图片有自动切换功能
• 5、jquery实现图片自动切换和点击切换

Jquery幻灯片特效代码分享--鼠标滑过按钮时切换（2）

这篇文章主要介绍了jQuery实现幻灯片焦点图，可实现非常炫目时尚的幻灯片效果，非常具有实用价值，基本能满足你在网页上使用幻灯片(焦点图)效果，具体如下

幻灯片效果描述：用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。

自定义切换参数效果：向下切换、切换时间为8秒、鼠标滑过按钮时切换

运行效果截图如下：

具体代码如下

head

titleJquery幻灯片焦点图插件/title

script

src="js/jquery-1.4a2.min.js"

type="text/javascript"/script

script

src="js/jquery.-1.2.1.min.js"

type="text/javascript"/script

script

type="text/javascript"

$(function(){

$("#KinSlideshow").KinSlideshow({

moveStyle:"down",

intervalTime:8,

mouseEvent:"mouseover",

titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}

});

})

/script

style

type="text/css"

.code{

height:auto;

padding:20px;

border:1px

solid

#9EC9FE;

background:#ECF3FD;}

.code

pre{

font-family:"Courier

New";font-size:14px;}

.code

pre

code.note{

color:#999}

.code2{border:1px

solid

#FEB0B0;

background:#FFF1F1;

margin-top:10px;}

.code2

pre{

margin-left:20px;

font-size:12px;}

.info{

font-size:12px;

color:#666666;

font-family:Verdana;

margin:20px

50px

0;}

.info

p{

margin:0;

padding:0;

line-height:22px;

text-indent:40px;}

h2.title{

margin:0;

padding:0;

margin-top:50px;

font-size:18px;

font-family:"微软雅黑",Verdana;}

h2.title

span.titleInfo{

font-size:12px;

color:#333;

margin-left:10px;font-family:Verdana;}

h3.title{

font-size:16px;

font-family:"微软雅黑",Verdana;}

.importInfo{

font-family:Verdana;

font-size:14px;}

/style

/head

body

lih3a

href="demo2.html"自定义切换参数效果/a/h3/li

/ol

div

id="KinSlideshow"

style="visibility:hidden;"

a

target="_blank"img

src="images/11.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/23.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/22.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/5.jpg"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/4.jpg"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

/div

/body

/html

希望本文所述对大家的Jquery特效设计有所帮助。

怎么在这个JQ轮播上加自动滚动

看代码的格式是使用的jquery superslide插件，直接添加一个autoPlay:true参数就行了; JS部分的修改如下：

!-- 滚动图片 --

script type="text/javascript"

jQuery(".picScroll").slide({ 

    mainCell:"ul", 

    effect:"leftLoop", 

    vis:4, 

    scroll:2, 

    autoPage:true, 

    switchLoad:"_src",

    autoPlay:true

    });

/script

Jquery的Tabs内容轮换效果实现代码,几行搞定

本篇文章主要是对Jquery的Tabs内容轮换效果的实现代码进行了介绍。几行代码轻松搞定

代码如下:

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

titleJquery的Tabs内容轮换效果实现代码,几行搞定/title

script

language="javascript"

type="text/javascript"

src="/Scripts/jquery-1.4.4.min.js"/script

style

type="text/css"

*

{

margin:0;

padding:0;}

body

{

font:12px

Verdana,

Geneva,

sans-serif;

color:#404040;}

.tabs

{

margin:10px

20px;

width:360px;

position:relative;

overflow:hidden;

height:1%;

height:160px;}

.tabs

span

{

z-index:2;

font-size:12px;

border:1px

solid

#d5d5d5;

width:95px;

height:25px;

line-height:25px;

text-align:center;

float:left;

margin-right:5px;

cursor:pointer;}

span.active

{

background-position:0

-25px;

background-color:#d5d5d5;}

#tab-01,

#tab-02,

#tab-03

{

position:absolute;

top:26px;

left:0;

width:338px;

padding:10px;

height:93px;

border:1px

solid

#d5d5d5;

z-index:1;}

#tab-02,

#tab-03

{

display:none;}

/style

script

type="text/javascript"

$(document).ready(function

()

{

$('.tabs

span').mouseover(function

()

{

//div隐藏

$('.tabs

div').hide();

//查找.tabs

span同辈元素span

后面紧邻的同辈元素div显示

$(this).siblings('span').removeClass('active').end().addClass('active').next('div').show();

});

});

/script

/head

body

div

class="tabs"

!--

默认第一个tab为激活状态

--

span

class="active"热点新闻/span

div

id="tab-01"news/div

span娱乐新闻/span

div

id="tab-02"enteriment/div

span就业形势/span

div

id="tab-03"jobs/div

/div

/body

/html

怎么用jquery实现图片上一张下一张效果？ 注：图片有自动切换功能

给你个思路哈

1,定义一个function

2,点击的时候触发这个function，获取当前img名称

3,因为你的img名称都是有规律可循的，所以自己可拼接下一个的img名称

4,将拼接完成的img名称加上路径，替换现在显示的img路径即可

jquery实现图片自动切换和点击切换

需要js+css配合，我给您找段代码吧。

JS代码

$(function () {

    $(".dummy").click(function () { return false; });

    var flipDelay = 5500;

    var flipCount = $("div.banner_footer a").size(); // 图片总数

    var flipId = 1;

    var flipId1 = 0;

    var flipTimer = null;

    var flipTimer1 = null;

    var i = 0;

    var flip = function () {

        if (flipCount  2) return;

        $("div.banner_footer a").removeClass("current");

        $($("div.banner_footer a").get(flipId)).addClass("current");

        $($("div.banner_footer a").get(flipId)).css("current");

        $("div.banner  a:visible").fadeOut();

        $($("div.banner a").get(flipId)).fadeIn("slow");

        flipId = (flipId + 1) % flipCount;

        flipTimer = window.setTimeout(flip, flipDelay);

    }

    flipTimer = window.setTimeout(flip, flipDelay);

    $("div.banner_footer a").click(function () {

        clearTimeout(flipTimer);

        flipId = $("div.banner_footer a").index(this);

        flip();

        return false;

    });

    var flipserver = function () {

        $("div.index_server_box  a:visible").fadeOut();

        $($("div.index_server_box a").get(flipId1)).fadeIn("slow");

    }

    $("a.index_server_left").click(function () {

        flipId1 = (flipId1 - 1) % 3;

        flipserver();

        return false;

    });

    $("a.index_server_right").click(function () {

        flipId1 = (flipId1 + 1) % 3;

        flipserver();

        return false;

    });

    var documentWidth = $(window).width();

    var left = (documentWidth - 310) / 2;

    var right = left + 306;

    $("div.services_box div.left").css("width", left + "px");

    $("div.services_box div.right").css("width", right + "px");

    $(window).resize(function () {

        var documentWidth = $(window).width();

        var left = (documentWidth - 310) / 2;

        var right = left + 306;

        $("div.services_box div.left").css("width", left + "px");

        $("div.services_box div.right").css("width", right + "px");

    });

});

html样式

div class="banner_box"

        div class="banner"

            a href="" class="banner1"img src="img/banner1.jpg" alt="视觉为您解决网站建设中企业品牌形象问题" //a

            a href="" class="banner2"img src="img/banner2.jpg" alt="独具匠心的网页设计让您的网站与总部同" //a

            a href="" class="banner3"img src="img/banner3.jpg" alt="针对用户需求，提供高品质网站设计服务" //a

            a href="" class="banner4"img src="img/banner4.jpg" alt="网站建设公司团队的力量" //a

            a href="" class="banner5"img src="img/banner5.jpg" alt="招聘网页设计师" //a

            div class="banner_footer"

                a class="a1 current"img src="img/a13.jpg" alt="" //a

                a class="a2" img src="img/a14.jpg" alt="" //a

                a class="a3"img src="img/a15.jpg" alt="" //a

                a class="a4"img src="img/a16.jpg" alt="" //a

                a class="a5"img src="img/a17.jpg" alt="" //a

            /div

        /div

    /div

css样式

div.banner_box{height:430px; overflow:hidden; background:url(../img/b1.jpg) repeat-x;}

div.banner_box div.banner{width:990px; height:430px; overflow:hidden; margin:auto; position:relative;}

div.banner_box div.banner a{border:0;}

div.banner_box div.banner a.banner1 img{margin-left:200px;}

div.banner_box div.banner a.banner2 img{margin-left:236px;}

div.banner_box div.banner a.banner3 img{margin-left:250px;}

div.banner_box div.banner a.banner4 img{margin-left:231px;}

div.banner_box div.banner a.banner5 img{margin-left:245px;}

div.banner_box div.banner div.banner_footer{position:absolute;width:120px;height:20px;top:30px; right:0;z-index:100;  }

div.banner_box div.banner div.banner_footer a{float:left; width:19px; height:19px; cursor:pointer; }

div.banner_box div.banner div.banner_footer a.current{background:url(../img/a13_1.jpg) center center no-repeat;}

div.banner_box div.banner div.banner_footer a img{border:0; margin:3px 0 0 3px;}

希望能帮到您！祝您好运！

关于jquery自动滚动切换特效代码和html滚动效果代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。