循环滚动图片html代码,js jquery做的图片连续滚动代码

小灰灰 2022-10-06 11:00 226阅读 0赞

核心代码如下，大家可以参考

$(document).ready(function()\{

$(".bannerbutton li").each(

function()\{

$(this).click(

function()\{

bannerGo($(this).attr("num"));

)

$(".img li:last").html($(".img li:first").html());

\});

var active=1;//当前显示第1个

var picNum=4;//4个图转换

var time=500;//移动速度

var intTime=3000;//自动转换间隔时间

var width=568; //图片宽

var perDistance=57;//每次移动距离

var tagObj=0;

var marquee;

var autoMarquee;

var distance;

var tmpDistance=0;

var listLeft=0;

var tagLeft=0;

var move=false;

function bannerGo(tag)\{

if(active != tag)\{

if(!move)\{

listLeft=parseInt($(".banner ul.img").css("left"));

distance=(tag-active)\*width;

tmpDistance=0;

perTime=parseInt(time\*perDistance/distance);

if(tag>active)\{

tagLeft=listLeft-distance;

marquee=setInterval("Marquee(1)",perTime)

\}else\{

tagLeft=listLeft-distance;

marquee=setInterval("Marquee(0)",perTime)

active=Number(tag);

if(active==picNum+1)

active=1;

move=true;

function Marquee(t)\{

var x=false;

if(t==0)\{

listLeft=listLeft+perDistance;

if((tagLeft-listLeft)>=perDistance)\{

$(".banner ul.img").css("left",listLeft+"px");

\}else\{

$(".banner ul.img").css("left",tagLeft+"px");

x=true;

\}else\{

listLeft=listLeft-perDistance;

if((tagLeft-listLeft)<=perDistance)\{

$(".banner ul.img").css("left",listLeft+"px");

\}else\{

$(".banner ul.img").css("left",tagLeft+"px");

x=true;

if(x)\{

clearInterval(marquee);

tmpDistance=0;

listLeft=0;

tagLeft=0;

move=false;

$(".bannerbutton li").css("background","url(/images/index/b2.gif) no-repeat");

$(".bannerbutton li\[@num="+active+"\]").css("background","url(/images/index/b1.gif) no-repeat");

if(tagObj==picNum+1)\{

$(".banner ul.img").css("left","0");

active=1;

function autoMarquee()\{

tagObj=Number(active)+1;

bannerGo(tagObj);

function autoMarqueeStart()\{

if(!move)\{

marquee=setInterval("autoMarquee()",intTime)

\}else\{

setTimeout("autoMarqueeStart()",time);

autoMarqueeStart();

\*\{margin:0;padding:0;border:0\}

li\{float:left;\}

ul\{list-style-type:none;\}

.banner\{height:228px;width:568px;overflow:hidden;\}

.bannerbutton li\{

width:23px;

height:22px;

background:url(/images/index/b2.gif) no-repeat;

cursor:pointer;

line-height:22px;

text-align: center;

color: \#fff;

font-weight: bold;

.banner .img li\{float:left;\}

.banner .img \{

position: relative;width:5600px;

body,td,th \{

font-size: 12px;

body \{

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

*  1
 *  2
 *  3
 *  4

*   
 *   
 *   
 *   
 *

循环滚动图片html代码,js jquery做的图片连续滚动代码

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关实现歌词效果自动滚动_JS实现图片自动滚动(图片横向滚动)

相关循环滚动图片html代码,js jquery做的图片连续滚动代码

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

相关 Swiper.js响应式单排图片滚动jQuery代码

相关 JS图片滚动代码（无缝、平滑）

相关 js 滚动的图片

相关 h5、tab图片滚动原生js代码

相关 js图片无缝滚动

相关 Jquery图片轮播（连续滚动+突出显示）

相关常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全