jquery图片循环,css图片循环

jquery实现图片循环切换

试试这个焦点图切换

10年积累的成都网站设计、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有斗门免费网站建设让你可以放心的选择与我们合作。

有12345数字一起切换

鼠标点一下数字会变换到另一张图片，不点就会自动换

里面有教程和源码

Jquery图片轮播循环问题，求大神指教，怎么实现循环播放？

//js

var isround = "";

var i=0;

$(function(){

isround = setTimeout("change()",3000);

$("div[name=ban] div img:eq(0)").show().siblings().hide();

$(".num li:eq(0)").addClass("current").siblings().removeClass("current");

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

i=$(".num li").index(this);

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

$("div[name=ban] div img").eq($(".num li").index(this)).show().siblings().hide();

isround = setTimeout("change()",3000);

}).hover(function(){

clearTimeout(isround)

},function(){

isround = setTimeout("change()",3000);

})

})

function change(){

if(i==$(".num li").length) i=0;

$(".num li").eq(i).addClass("current").siblings().removeClass("current");

$("div[name=ban] div img").eq(i).show().siblings().hide();

i++;

setTimeout("change()",3000);

}

//html

div name="ban"

div

!--图片--

img src="/resources/images/f1.jpg" width="369px" height="114px" /

img src="/resources/images/f2.jpg" width="369px" height="114px" /

img src="/resources/images/f1.jpg" width="369px" height="114px" /

img src="/resources/images/f2.jpg" width="369px" height="114px" /

img src="/resources/images/f1.jpg" width="369px" height="114px" /

/div

div class="numbox"

!--选项--

ul class="num"

li class="current"/li

li/li

li/li

li/li

li/li

/ul

/div

/div

不懂再问，这是我自己写的一个轮换，里面包括了点击事件，原理是控制图片的显示隐藏，

别的有控制高度等等之类的  。

使用jQuery实现图片循环滚动效果，当把光标移动图上，停止滚动;当把光标从图上移出后，图片继续滚动

 !DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

link rel="stylesheet" href=""

style

.swiper-wrapper {

height: 300px;

}

.swiper-slide {

display: flex;

justify-content: center;

align-items: center;

}

.swiper-slide:nth-child(1) {

background: red;

}

.swiper-slide:nth-child(2) {

background: green;

}

.swiper-slide:nth-child(3) {

background: blue;

}

/style

/head

body

div class="swiper-container"

div class="swiper-wrapper"

div class="swiper-slide"Slide 1/div

div class="swiper-slide"Slide 2/div

div class="swiper-slide"Slide 3/div

/div

/div

/body

script src=""/script

script language="javascript"

var mySwiper = new Swiper(document.querySelector(".swiper-container"), {

autoplay: true,

})

document.querySelector('.swiper-container').onmouseover = () = {

mySwiper.autoplay.stop();

}

document.querySelector('.swiper-container').onmouseout = () = {

mySwiper.autoplay.start();

}

/script

/html

 请采纳

jquery，如何实现图片停留5秒后向上循环翻滚

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

html

head

style

* {

margin: 0px;

padding: 0px;

}

#d1 {

border: 1px solid #aaaaaa;

margin-left: 200px;

margin-top: 40px;

width: 548px;

height: 177px;

overflow: hidden;

position: relative;

}

#adv,#num {

position: absolute;

}

ul li {

list-style: none;

display: inline;

}

ul img {

width: 548px;

height: 177px;

display: block;

}

#num {

right: 5px;

bottom: 5px;

}

#num li {

float: left;

color: #FF7300;

text-align: center;

line-height: 16px;

width: 16px;

height: 16px;

font-family: Arial;

font-size: 12px;

cursor: pointer;

overflow: hidden;

margin: 3px 1px;

border: 1px solid #FF7300;

}

.on {

line-height: 21px;

width: 21px;

height: 21px;

font-size: 16px;

margin: 0 1px;

border: 0;

background-color: red;

font-weight: bold;

}

/style

script type="text/javascript" src="js/jquery-1.4.3.js"/script

script type="text/javascript"

$(function(){

$('#num li').mouseenter(function(){

//需要知道光标指向的li的下标

var index = $('#num li').index(this);

//滚动图片

showImage(index);

}).eq(0).mouseenter();

var i = 0;

var taskId;

$('#d1').hover(function(){

//光标进来，停止滚动

clearInterval(taskId);

},function(){

//光标移出，开始滚动

taskId = setInterval(function(){

showImage(i);

i++;

if(i == 5){

i = 0;

}

},3500);

}).mouseleave();

});

function showImage(index){

stop(true);

$('#adv').animate({'top':-177*index},30);

$('#num li').eq(index).addClass('on').siblings().removeClass('on');

}

/script

/head

body

div id="d1"

ul id="adv"

liimg src="images/1.jpg" //li

liimg src="images/2.jpg" //li

liimg src="images/3.jpg" //li

liimg src="images/4.jpg" //li

liimg src="images/5.jpg" //li

/ul

ul id="num"

li1/li

li2/li

li3/li

li4/li

li5/li

/ul

/div

/body

/html