jQuery实现轮播图和腰带
一、纯js实现与jQuery实现的区别
纯js实现轮播图：
function clickNum(index){
var pics= document.getElementsByClassName("wheel");
var yuan=document.getElementsByClassName("yuan");
pics[index].style.opacity=1;//当前点击的是不透明
yuan[index].style.backgroundColor="#fff";//设置小圆点背景
for(var j=0;j<pics.length;j++){
if(j!=index){
pics[j].style.opacity=0;//其他的都透明
yuan[j].style.backgroundColor="";
}
}
i=index;//让自动轮播 接着点击的序号来播放
}
var i=0;
function autoChangePic(){
var pics= document.getElementsByClassName("wheel");
clickNum(i);
i++;轮播图索引+1
if(i==pics.length){
i=0;//回到第一张图片
}
}
//鼠标放入，停止轮播
function over(){
clearInterval(au);//清除定时器
}
//鼠标移出，恢复轮播
function out(){
au= setInterval(autoChangePic,3000);//重新启动定时器
}
var au= setInterval(autoChangePic,3000);//设置定时器定时轮播切换图片
纯js实现腰带：
var mr;//向右移动的定时器
var ml;//向左移动的定时器
var max=2;//最大图片数
var size=1010;//轮播图宽度
var step=10;//每次移动的单位 注意 必须是size的整数倍
var c=true;//连续点击标记
var j=0;//图片索引
//右边移动函数
function moveRight(){
var main=document.getElementById("mainbox");
main.scrollLeft+=step;//每次移动一个step单位
if(main.scrollLeft==(j+1)*size){//当完成了移动
clearInterval(mr);//停止移动计时器
j++;//轮播图索引+1
if(j==max){//如果是最后一张
j=0;//无缝滚动 回到开头
}
c=true;//执行完成 按钮再次可以点击
}
}
//点击右移 函数
function clickRight(){
if(c){//如果没有移动正在执行
var main= document.getElementById("mainbox");
main.scrollLeft=j*size;//起点复位
mr= setInterval(moveRight,1);//启动定时器
c=false;//移动定时器开启 不让连续点击
}
}
//左边移动 函数
function moveLeft(){
var main= document.getElementById("mainbox");
main.scrollLeft-=step;//移动1个单位
if(main.scrollLeft==(j-1)*size){//到达左边移动终点
clearInterval(ml);//终止左移定时器
j--;//索引-1
c=true;//移动执行完成 可以再次点击
//document.getElementById("watch").innerHTML=i;
}
}
//点击左移 函数
function clickLeft(){
if(c){//如果没有正在执行的移动
var main= document.getElementById("mainbox");
if(j==0){//如果已经是最左边的一张则从第后一张开始
j=max;//实现无缝
}
main.scrollLeft=j*size;//起点复位
ml=setInterval(moveLeft,1);//启动定时器开始左移
c=false;//禁止连续点击
}
}
setInterval(clickRight,6000);
1、纯js代码复杂，逻辑比较难以理解。
2、jQuery实现，代码相对简单，逻辑也比较容易理解一些。
3、避免了使用js实现腰带还要计算像素的问题。
二、需要用到的工具
intelliJ IDEA（可以是其他开发工具）、Google Chrome、jquery.min.js（可以是其他版本）
三、具体实现
1、使用intelliJ IDEA新建一个java web 项目。
2、在web文件夹下新建img文件夹用来存放要使用的图片。
3、新建jsp页面，并编写以下代码。
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/7/18
Time: 9:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>lunbo</title>
<script type="text/javascript" src="jquery.min.js">//导入jQuery文件</script>
<script type="text/javascript">
$(document).ready(function () {
//轮播图部分
var imgIndex=1;//定义轮播图显示图片下标索引
function autoPlay(){//自动轮播
$(".point a").eq(imgIndex).css({backgroundColor: "#000",color:"#fff"}).parents("li").siblings().find("a").css({backgroundColor: "#fff",color:"#000"});//设置小圆点样式
$(".wheel").eq(imgIndex).fadeIn(1000).siblings(".wheel").fadeOut(1000);//设置图片轮播切换样式
imgIndex++;//轮播图索引+1
if(imgIndex>=$(".wheel").size()){//当轮播到最后一张后
imgIndex=0;//回到第一张图片
}
}
setInterval(autoPlay,2000);//设置自动轮播定时器
$(".point a").click(function () {//点击小圆点显示对应图片
imgIndex=parseInt($(this).text())-1;//取得当前点击圆点对应的图片索引下标
$(".wheel").eq(imgIndex).fadeIn(1000).siblings(".wheel").fadeOut(1000);//设置图片轮播切换样式
$(".point a").eq(imgIndex).css({backgroundColor: "#000",color:"#fff"}).parents("li").siblings().find("a").css({backgroundColor: "#fff",color:"#000"});//设置小圆点样式
})
//腰带效果部分
$("#next").click(function () {//点击切换下一张
$(".pics>img").first().animate({marginLeft:"-624px"},1000,function () {//624px为图片的宽度
$(this).css("marginLeft","0px").appendTo(".pics");//当第一张图片完全移出时将其插入到最后，并将marginLeft重置
})
})
$("#pre").click(function () {//点击切换上一张
$(".pics>img").last().prependTo(".pics").css("marginLeft","-624px");//将最后一张图片放到第一张图片前面，并将div里的内容整体向前移一张图片的位置
$(".pics>img").first().animate({marginLeft:"0px"},1000);//将div里的内容归位实现切换到上一张的效果
})
})
</script>
<style type="text/css">
/*css样式*/
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
li{
list-style: none;
float: left;
}
.lunboMain{
width: 624px;
height: 336px;
margin: 0 auto;
margin-top: 20px;
/*overflow: hidden;*/
position:relative;
}
.wheel{
width:100%;
height: 336px;
position:absolute;
}
.point{
position:absolute;
bottom:0px;
right: 5px;
z-index: 9999;
}
.point ul li a{
display:inline-block ;
width: 24px;
height: 24px;
margin:5px 5px;
color:#000;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 24px;
}
#pre,#next{
display: inline-block;
width: 30px;
height: 60px;
font-size: 30px;
color: #fff;
line-height: 60px;
background: rgba(0,0,0,.2);
font-weight: 600;
position:absolute;
top:135px;
}
#pre{
left: 0;
}
#next{
right: 0;
}
.yaodai{
width: 624px;
height: 336px;
overflow:hidden;
margin:0 auto;
position: relative;
}
</style>
</head>
<body>
<div style="height: 1000px;">
<!--轮播图部分-->
<div class="lunboMain">
<div class="point">
<ul>
<li><a href="#" style="background-color: black;color: #fff;">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div style="clear: both;"></div>
</div>
<div class="wheel" style="z-index: 4;"><img src="img/a1.jpg"></div>
<div class="wheel" style="z-index: 3;"><img src="img/a2.jpg" ></div>
<div class="wheel" style="z-index: 2;"><img src="img/a3.jpg"></div>
<div class="wheel" style="z-index: 1;"><img src="img/a4.jpg" ></div>
<div style="clear: both;"></div>
</div>
<!--腰带部分-->
<div class="yaodai">
<div class="pics" style="width: 3000px;height: 350px;margin-top: 20px;font-size: 0;">
<img src="img/a1.jpg">
<img src="img/a2.jpg">
<img src="img/a3.jpg">
<img src="img/a4.jpg">
</div>
<a href="javascript:void ()" id="pre"><</a>
<a href="javascript:void ()" id="next">></a>
</div>
</div>
</body>
</html>
效果图：
这样就使用jQuery实现了一个简单的轮播图和腰带！
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
