扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
最简单的方法，用css把所以图片重叠再一起并把样式display设置为none，然后用jquery获取所有图片，用循环语句设置css的display为block就可以了。
十余年的古冶网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整古冶建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“古冶网站设计”,“古冶网站推广”以来，每个客户项目都认真落实执行。
下面是常用的轮播图插件实例，复制下来稍微改动下样式就行了
!--效果演示地址 ;
!--下载插件并引入到页面--
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
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
问题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最后的位置。
希望对你有帮助!
这样我看起来有点恶心，你去把你写的网页打开，然后F12查看网页属性，自己要学会查错。
mouseover时清除一下计时器，并不需要调用showpic(n)。因为你鼠标悬浮是想要停止自动切换。clearTimeout(t)；
再帮一个moverout事件，里鼠标移出重新开始计数器。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网