这篇文章主要为大家详细介绍了射流研究…轮播图实现简单代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…轮播图实现代码，供大家参考，具体内容如下
思路：
1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且溢出：隐藏，这样保证每次可以只显示一个图片
2、集装箱内有个放图片的目录进行位置的定位，其中的图片采用漂浮物的方式，同时当图片进行轮播时，改变目录的左边的值使得其显示的图片发生变化。
3、图片的轮播使用定时器，通过定时器改变目录的左边的值是的图片循环展示
4、当鼠标滑动到图片上时，清除定时器，图片停止轮播，当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应，同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示
代码：
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题轮播图/标题
style type='text/css '。容器{
边距：0自动；
宽度：600像素
高度：400像素
位置：相对；
溢出：隐藏；
边框：4px纯灰；
箱形阴影：3px 3px 5px灰色；
边框半径：10px
}。列表{
宽度：4200像素
高度：400像素
位置：绝对；
top:0px；
}
img{
浮动：左；
宽度：600像素
高度：400像素
}。圆点{
位置：绝对；
左：40%;
底部：30px
列表样式：无；
}。圆点李{
浮动：左；
宽度：8px
高度：8px
边界半径：50%;
背景：灰色；
左边距：5px
}。圆点。活动{
背景：白色；
}。前，下一个{
位置：绝对；
top:40%；
字体大小：40px
颜色：白色；
文本对齐：居中；
背景：rgba(128，128，128，0.5)；
/*显示：无；*/
}。前{
左：30px
}。下一个{
右：30px
}
/风格
/头
身体
div class='容器'
div class=' list ' style=' left:-600 px；'
img src='img/5.jpg '
img src='img/1.jpg '
img src='img/2.jpg '
img src='img/3.jpg '
img src='img/4.jpg '
img src='img/5.jpg '
img src='img/1.jpg '
/div
ul class='dots '
li index=1 class='active dot'/li
li index=2 class='dot'/li
li index=3 class='dot'/li
li index=4 class='dot'/li
li index=5 class='dot'/li
/ul
div class='pre'/div
div class='next'/div
/div
脚本类型='文本/javascript '
var指数=1，定时器；
函数init(){
事件绑定()；
autoPlay()；
}
init()；
函数自动播放(){
timer=setInterval(function () {
动画(-600);
网点指数(真)；
},1000)
}
函数stopAutoPlay() {
间隙(定时器);
}
函数点索引（添加){
如果（添加){
指数；
}
否则{
索引-;
}
if(index5){
指数=1;
}
if(index1){
指数=5;
}
dot active()；
}
函数dotActive() {
var dots=文档。getelementsbyclassname(' dot ')；
var len=dots.length
for(var I=0；ileni ){
圆点[我].点'；
}
for(var I=0；ileni ){
/*此处可以不用parseInt，当不用全等时*/
if(index===parseInt(dots[i].获取属性(' index '){
圆点[我].点活动'；
}
}
}
函数eventBind(){
/*点的点击事件*/
var dots=文档。getelementsbyclassname(' dot ')；
var len=dots.length
for(var I=0；ileni ){
（函数(j){
点[j]的缩写.onclick=函数(e){
var ind=parseInt(dots[j].获取属性(“index”)；
动画((索引-索引)*(-600))；/*显示点击的图片*/
索引=ind
dot active()；
}
})(一)
}
/*容器的盘旋事件*/
var con=文档。getelementsbyclassname(' container ')[0]；
/*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
con.onmouseover=function (e) {
停止自动播放()；
}
con.onmouseout=函数(e){
autoPlay()；
}
/*箭头事件的绑定*/
var pre=文档。getelementsbyclassname(' pre ')[0]；
var next=文档。getelementsbyclassname(' next ')[0]；
pre.onclick=函数(e) {
网点指数(假)；
动画(600);
}
next.onclick=function (e) {
网点指数(真)；
动画(-600);
}
}
函数动画（偏移){
var列表=文档。getelementsbyclassname(' list ')[0]；
var left=parse int(lists。风格。向左。切片(0，列表。风格。向左。(' p '))偏移量的索引；
如果（左-3000){
列表。风格。left='-600 px '；
}
else if(左-600){
列表。风格。left='-3000 px '；
}
否则{
列表。风格。left=左‘px’；
}
}
/脚本
/body
/html
精彩专题分享：jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。