jQuery实现图片轮播小练习

图片轮播这个功能很多的网页都会用到，这次模仿着京东首页的图片轮播写了一个，样式和效果与京东的差不多，当然，没有原版那么好，但是感觉也差不多了，希望对大家有点帮助。

主体部分

<head><meta charset="UTF-8"><title>图片轮播</title><link rel="stylesheet" type="text/css" href="../CSS/PC.css"><script src="jquery-3.1.0.min.js"></script><script src="../JS/PCJS.js"></script>
</head>
<body><div id="main"><ul id="picture"><li><img src="../images/1.jpg" width="790px" height="340px"></li><li><img src="../images/2.jpg" width="790px" height="340px"></li><li><img src="../images/3.jpg" width="790px" height="340px"></li><li><img src="../images/4.jpg" width="790px" height="340px"></li><li><img src="../images/5.jpg" width="790px" height="340px"></li><li><img src="../images/6.jpg" width="790px" height="340px"></li><li><img src="../images/7.jpg" width="790px" height="340px"></li><li><img src="../images/8.jpg" width="790px" height="340px"></li></ul><div class="pointList" id="pointList"><li class="pointer" style="background-color: #db192a"></li><li class="pointer"></li><li class="pointer"></li><li class="pointer"></li><li class="pointer"></li><li class="pointer"></li><li class="pointer"></li><li class="pointer"></li></div><div id="arr"><span id="left"><</span><span id="right">></span></div></div>
</body>

其中的图片是用的京东的图片，实际按自己的需要将图片添加进去即可。

css样式

*{margin: 0px 0px;padding: 0px 0px;}ul{list-style:none;border:0;width: 790px;overflow: hidden;
}#main{width: 790px;height: 340px;margin: 100px  auto;padding: 20px auto;overflow: hidden;
}.pointList{position: absolute;height: 20px;width: 184px;z-index: 1;left: 44%;bottom: 270px;font-size: 0;padding: 4px auto;border-radius: 12px;background-color: hsla(0,0%,100%,0.3);display: block;
}
.pointer{position: relative;bottom: -4px;cursor: pointer;display: inline-block;margin-right: 10px;width: 12px;height: 12px;border-radius: 100%;left: 8px;background-color: #fff;
}#arr span{width:30px;height:60px;position:absolute;left: auto;top:38%;margin-top:-20px;background:#000;cursor:pointer;line-height:60px;text-align:center;font-weight:bold;font-family:'黑体';font-size:30px;color:#fff;opacity:0;
}
#right {background-color: deeppink;left: auto;right: 287px;
}
li{cursor: pointer;
}

js代码

$(document).ready(function(){var picture=$("#picture");var pictures=picture.children();var width=picture.width();var arr=$("#arr");var pointlist=$("#pointList");var points=pointlist.children();var left=$("#left");var right=$("#right");var index=0;var timers=null;//鼠标放到原点换图points.bind("mouseover",function(){index=$(this).index();pictures.eq(index).fadeIn("slow").siblings().fadeOut("slow");$(this).attr({"style":"background-color:#db192a"}).siblings().attr({"style":"background-color:#fff"});});//设置定时器，自动轮播timers = setInterval( function autoplay(){points.eq(index).attr({"style":"background-color:#db192a"}).siblings().attr({"style":"background-color:#fff"});pictures.eq(index).fadeIn("slow").siblings().fadeOut("slow");index++;if(index==points.length){index=0;}},3000);//下一张按钮//悬停事件right.hover(function(){$(this).attr({"style":"opacity: 0.5"}).siblings().attr({"style":"opacity: 0.3"});},function(){$(this).attr({"style":"opacity: 0"}).siblings().attr({"style":"opacity: 0"});});//换到下一张right.bind("click",function(){index++;if(index==points.length){index=0;}points.eq(index).attr({"style":"background-color:#db192a"}).siblings().attr({"style":"background-color:#fff"});pictures.eq(index).fadeIn("slow").siblings().fadeOut("slow");});//上一张按钮//悬停事件left.hover(function(){$(this).attr({"style":"opacity: 0.5"}).siblings().attr({"style":"opacity: 0.3"});},function(){$(this).attr({"style":"opacity: 0"}).siblings().attr({"style":"opacity: 0"});});//换到上一张left.bind("click",function(){if(index==0){index=points.length;}index--;points.eq(index).attr({"style":"background-color:#db192a"}).siblings().attr({"style":"background-color:#fff"});pictures.eq(index).fadeIn("slow").siblings().fadeOut("slow");});//图片悬停显示上下张picture.hover(function(){right.attr({"style":"opacity: 0.3"});left.attr({"style":"opacity: 0.3"});//清除定时器clearInterval(timers);},function(){right.attr({"style":"opacity: 0"});left.attr({"style":"opacity: 0"});//重新添加定时器timers = setInterval(function(){points.eq(index).attr({"style":"background-color:#db192a"}).siblings().attr({"style":"background-color:#fff"});pictures.eq(index).fadeIn("slow").siblings().fadeOut("slow");index++;if(index==points.length){index=0;}},3000);});//原点悬停显示上下张pointlist.hover(function(){//清除定时器clearInterval(timers);arr.children().attr({"style":"opacity: 0.3"});},function(){//重新添加定时器timers = setInterval(function(){points.eq(index).attr({"style":"background-color:#db192a"}).siblings().attr({"style":"background-color:#fff"});pictures.eq(index).fadeIn("slow").siblings().fadeOut("slow");index++;if(index==points.length){index=0;}},3000);arr.children().attr({"style":"opacity: 0"});});arr.hover(function(){//清除定时器clearInterval(timers);},function(){//重新添加定时器timers = setInterval(function(){points.eq(index).attr({"style":"background-color:#db192a"}).siblings().attr({"style":"background-color:#fff"});pictures.eq(index).fadeIn("slow").siblings().fadeOut("slow");index++;if(index==points.length){index=0;}},3000);});
});

这图片轮播的效果就实现，但是有错误和可以改进的地方，希望路过的大神们多多指点。

jQuery实现图片轮播小练习相关推荐

利用jQuery实现图片轮播
利用jQuery实现图片轮播需求实现步骤一.获取相关对象二.设置切换按钮三.设置图片首尾相接效果四.随图片切换更新小圆点五.点击小圆点切换图片六.鼠标无操作时图片自动轮播示例需求 ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
jquery:手风琴图片轮播
jquery:手风琴图片轮播 html部分: <!DOCTYPE html> <html> <head lang="en"><meta c ...
html5图片轮播在线制作教程,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
使用jQuery实现图片轮播与切换功能
使用jQuery实现图片轮播与切换功能文章目录使用jQuery实现图片轮播与切换功能效果图一.body 二.jQuery 三.css 四.小结效果图一.body <body>& ...
小博老师演示常用JQuery效果 ——图片轮播
2019独角兽企业重金招聘Python工程师标准>>> [理论知识] 我们在实际开发应用程序的过程中,经常会遇到图片轮播的效果需求,本文小博老师就为大家演示一下,如何使用JQuery ...
JQuery实现图片轮播无缝滚动
图片轮播无缝滚动实例实现效果展示预览: 思路: 1.设置当前索引curIndex,和前一张索引prevIndex.(curIndex为下一次要显示的图片索引,prevIndex为现在看见的图片) 2 ...

jQuery实现图片轮播小练习

jQuery实现图片轮播小练习相关推荐

最新文章

热门文章