jquery焦点轮播,html焦点图轮播

有没有人手把手教我一个用jQuery实现的焦点图轮播的效果，我很需要，网上的脚本没解释看不懂，有大神吗

最简单的方法，用css把所以图片重叠再一起并把样式display设置为none，然后用jquery获取所有图片，用循环语句设置css的display为block就可以了。

十余年的古冶网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整古冶建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“古冶网站设计”,“古冶网站推广”以来，每个客户项目都认真落实执行。

如何仿淘宝首页jquery轮播焦点图

下面是常用的轮播图插件实例，复制下来稍微改动下样式就行了

!--效果演示地址 ;

!--下载插件并引入到页面--

link rel="stylesheet" href="css/idangerous.swiper.css"

script src="js/idangerous.swiper-2.x.min.js"/script

div class="swiper-container"

div class="swiper-wrapper"

div class="swiper-slide" 图片1/div

div class="swiper-slide" 图片2/div

div class="swiper-slide" 图片3/div

/div

/div

script type="text/javascript"

var mySwiper = new Swiper('.swiper-container');

/script

jquery图片轮播思路

使用jQuery做轮播图是网页特效中很常见的一个特效。

工具原料：编辑器、浏览器、jQuery

1、实现的总体思路：

首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。

2、实现的具体事件处理思路：

事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。

3、简单的代码示例如下：

!DOCTYPE html 

html 

head 

meta charset="UTF-8" 

titlejquery轮播效果图 /title 

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

style type="text/css" 

* { 

padding: 0px; 

margin: 0px; 

} 

a { 

text-decoration: none; 

} 

ul { 

list-style: outside none none; 

} 

.slider, .slider-panel img, .slider-extra { 

width: 650px; 

height: 413px; 

} 

.slider { 

text-align: center; 

margin: 30px auto; 

position: relative; 

} 

.slider-panel, .slider-nav, .slider-pre, .slider-next { 

position: absolute; 

z-index: 8; 

} 

.slider-panel { 

position: absolute; 

} 

.slider-panel img { 

border: none; 

} 

.slider-extra { 

position: relative; 

} 

.slider-nav { 

margin-left: -51px; 

position: absolute; 

left: 50%; 

bottom: 4px; 

} 

.slider-nav li { 

background: #3e3e3e; 

border-radius: 50%; 

color: #fff; 

cursor: pointer; 

margin: 0 2px; 

overflow: hidden; 

text-align: center; 

display: inline-block; 

height: 18px; 

line-height: 18px; 

width: 18px; 

} 

.slider-nav .slider-item-selected { 

background: blue; 

} 

.slider-page a{ 

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 

color: #fff; 

text-align: center; 

display: block; 

font-family: "simsun"; 

font-size: 22px; 

width: 28px; 

height: 62px; 

line-height: 62px; 

margin-top: -31px; 

position: absolute; 

top: 50%; 

} 

.slider-page a:HOVER { 

background: rgba(0, 0, 0, 0.4); 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 

} 

.slider-next { 

left: 100%; 

margin-left: -28px; 

} 

/style 

script type="text/javascript" 

$(document).ready(function() { 

var length, 

currentIndex = 0, 

interval, 

hasStarted = false, //是否已经开始轮播 

t = 3000; //轮播时间间隔 

length = $('.slider-panel').length; 

//将除了第一张图片隐藏 

$('.slider-panel:not(:first)').hide(); 

//将第一个slider-item设为激活状态 

$('.slider-item:first').addClass('slider-item-selected'); 

//隐藏向前、向后翻按钮 

$('.slider-page').hide(); 

//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 

$('.slider-panel, .slider-pre, .slider-next').hover(function() { 

stop(); 

$('.slider-page').show(); 

}, function() { 

$('.slider-page').hide(); 

start(); 

}); 

$('.slider-item').hover(function(e) { 

stop(); 

var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 

currentIndex = $(this).index(); 

play(preIndex, currentIndex); 

}, function() { 

start(); 

}); 

$('.slider-pre').unbind('click'); 

$('.slider-pre').bind('click', function() { 

pre(); 

}); 

$('.slider-next').unbind('click'); 

$('.slider-next').bind('click', function() { 

next(); 

}); 

/** 

* 向前翻页 

*/

function pre() { 

var preIndex = currentIndex; 

currentIndex = (--currentIndex + length) % length; 

play(preIndex, currentIndex); 

} 

/** 

* 向后翻页 

*/

function next() { 

var preIndex = currentIndex; 

currentIndex = ++currentIndex % length; 

play(preIndex, currentIndex); 

} 

/** 

* 从preIndex页翻到currentIndex页 

* preIndex 整数，翻页的起始页 

* currentIndex 整数，翻到的那页 

*/

function play(preIndex, currentIndex) { 

$('.slider-panel').eq(preIndex).fadeOut(500) 

.parent().children().eq(currentIndex).fadeIn(1000); 

$('.slider-item').removeClass('slider-item-selected'); 

$('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 

} 

/** 

* 开始轮播 

*/

function start() { 

if(!hasStarted) { 

hasStarted = true; 

interval = setInterval(next, t); 

} 

} 

/** 

* 停止轮播 

*/

function stop() { 

clearInterval(interval); 

hasStarted = false; 

} 

//开始轮播 

start(); 

}); 

/script 

/head 

body 

div class="slider" 

ul class="slider-main" 

li class="slider-panel" 

a href="

title="图片1" src="images/1.jpg"/a 

/li 

li class="slider-panel" 

a href="#"img title="图片2" src="images/1.jpg"/a 

/li 

li class="slider-panel" 

a href="#"img title="图片3" src="images/1.jpg"/a 

/li 

li class="slider-panel" 

a href="#"img title="图片4" src="images/1.jpg"/a 

/li 

/ul 

div class="slider-extra" 

ul class="slider-nav" 

li class="slider-item"1/li 

li class="slider-item"2/li 

li class="slider-item"3/li 

li class="slider-item"4/li 

/ul 

div class="slider-page" 

a class="slider-pre" href="javascript:;;"/a 

a class="slider-next" href="javascript:;;"/a 

/div 

/div 

/div 

/body 

/html

关于jQuery轮播焦点图的代码，这个是别人发的，新手有些看不明白，问题在补充里面，帮忙了大家

问题1：function Scroll(obj,speed,interval){....},这是个函数，在页面必然会有类似 Scroll(样式名称，速度，间隔) 这样的调用。

问题2：$("."+obj).each(function(){ ... }); 这段代码分开分析就会比较易懂，$("."+obj)这个表示的是获取页面中class含有obj的对象，返回的是jQuery对象数组；each()就是遍历这个数组。

function scroll(){ ... } 这同样是个函数，调用一定是在function Scroll(obj,speed,interval){....} 内部，代码没贴全，你自己找一下。

问题3：stop（）就是先停下来，为下一个动画做准备。这段代码不是移动li，就是移动UL，然后每次移动一个li的宽度。

问题4：这是在UL的动画的回调函数中的代码，意思是动画结束后，设置最左边的距离为0，就是紧贴最左边显示。

问题5：这里的$(this)，要看具体的上下文环境，因为是在$imgUl.stop().animate({left:-width},speed,function(){ .... }); 整个里面写的，所以$(this)指向的就是$imgUI。

$imgUl.children("li:first").appendTo($(this));

这句的意思就是，找到UL下面的第一个li把它放到UL中li最后的位置。

希望对你有帮助!

为什么我用jQuery实现的轮播焦点图只显示一张图？

这样我看起来有点恶心，你去把你写的网页打开，然后F12查看网页属性，自己要学会查错。

jquery焦点图轮播

mouseover时清除一下计时器，并不需要调用showpic(n)。因为你鼠标悬浮是想要停止自动切换。clearTimeout(t)；

再帮一个moverout事件，里鼠标移出重新开始计数器。