1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
静态获取图片写法，给定图片的个数，用js实现轮播图自动转换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- *******设置样式********** -->
<style type="text/css">
.show_div{
width: 400px
height: 400px
margin: 0 auto
border: 2px solid block
overflow: hidden
}
.scroll_div{
width: 2000px
height: 400px
}
.scroll_div img{
width: 400px
height: 400px
float: left
}
</style>
<!-- end -->
</head>
<body>
<div class="show_div">
<div class="scroll_div">
<img src="img/b.jpg" alt="">
<img src="img/c.jpg" alt="">
<img src="img/d.jpg" alt="">
<img src="img/a.jpg" alt="">
<img src="img/b.jpg" alt="">
</div>
</div>
</body>
<!-- *********js代码******** -->
<script type="text/javascript">
var scrollDiv = document.getElementsByClassName("scroll_div")[0]
// 定义初始值
var left =0
// 定义一个定时器 走一步
function move(){
var timer = setInterval(function(){
left --
if (left <= -1600) {
left = 0
}
if (left % -400 == 0) {
clearInterval(timer)
timer = null
}
scrollDiv.style.marginLeft = left + "px"
},10)
}
// 定义一个定时器 每隔固定时间 走一张
setInterval(function(){
move()
},5000)
</script>
</html>
(function ($) {/* var i = 2
$(document).ready(function () {
var arry = ['images/headback/001.jpg', 'images/headback/002.jpg', 'images/headback/003.jpg', 'images/headback/004.jpg', 'images/headback/005.jpg', 'images/headback/006.jpg', ]
setInterval(
function () {
$("#div_pic").css("backgroundImage", "url(" + arry[i] + ")")
i++
if (i == 5) {
i = 0
}
}
, 5000)
})定时换背景图片的代码 */
//下面是图片切换代码
/*
var t
var speed = 2//图片切换速度
var nowlan = 0//图片开始时间
function changepic() {
var imglen = $("#div_pic").find("li").length
$("#div_pic").find("li").hide()
$("#div_pic").find("li").eq(nowlan).show()
nowlan = nowlan + 1 == imglen ? 0 : nowlan + 1
t = setTimeout("changepic()", speed * 1000)
}
onload = function () { changepic()}
$(document).ready(function ()
//鼠标在图片上悬停让切换暂停
$("#div_pic").hover(function () { clearInterval(t)})
//鼠标离开图片切换继续
$("#div_pic").mouseleave(function () { changepic()})
})
*/
//下面是图片轮播代码
/* var num = 0
$(function(){
$("#div_pic ol li").mouseover(function(e){
$(this).attr("class","current")
$(this).siblings().attr("class","")//兄弟节点的class属性设置为空
//alert($('ul').index())
num = $('ul').index() + 2
var index = $(this).index()//记录选定的li标签在ul中的索引
//图片会出现层叠现象为了显示当前的图片，把当前的图片的z-index 值设置为大于其他的兄弟元素
$("#div_pic ul li").eq(index).css({"left":"650px","zIndex":num})
$("#div_pic ul li").eq(index).siblings().css("zIndex",num-1)
//动画效果，图片从右侧飞入
$("#div_pic ul li").eq(index).animate({left:"0"},500)
})
})*/
//下面是可配置轮播动画代码
$.fn.slide=function(options){
var defaults= {
affect:1, //1：上下滚动2:幕布式3:左右滚动；4：淡入淡出
time: 5000, //间隔时间
speed:500,//动画快慢
dot_text:true,//按钮上有无序列号
}
var opts=$.extend(defaults,options)
var $this=$(this)
var ool=$("<div class='dot'><p></p></div>")
var $box=$this.find("ul")
var $li=$box.find("li")
var timer=null
var num=0
$this.append(ool)
$box.find("li").each(function(i){
ool.find("p").append($("<b></b>"))
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur")
switch(opts.affect){
case 1:
break
case 2:
$box.find("li").css("display","none")
break
case 3:
$box.css({"width":$li.eq(0).width()*$li.length})
$li.css("float","left")
break
case 4:
$box.find("li").css("display","none")
break
}
$box.find("li").eq(0).show(0)
ool.find("b").mouseover(function(){
num=$(this).index()
run ()
})
timer=setInterval(auto,opts.time)
function auto(){
num<$box.find("li").length-1?num++:num=0
run()
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur")
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed)
break
case 2:
$box.find("li").css({"position":"absolute"})
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed)
break
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed)
break
case 4:
$box.find("li").css({"position":"absolute"})
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed)
break
}
}
$this.mouseover(function(){
clearInterval(timer)
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time)
})
}
}(jQuery))
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）