/* 普通函数 */
/* function fn(){
return 123
}
let a = fn()
console.log(a)*/
/* function fn(str){
let msg = str + 'hello'
return msg
}
let a = fn('张三丰') */
/* =>箭头函数后面只有一段表达式代表 return 返回 */
/* let fn = () =>123
let a = fn()
console.log(a)*/
/* 箭头函数只有一个参数()可以省略不写 */
/* 普通函数可以作为构造函数,箭头函数不能作为构造函数不然会报错 */
let fn = (str) =>{
let msg = str +'hello'
return msg
}
let a = fn('张无忌')
console.log(a)
/* 普通函数this谁调用就是谁的,箭头函数没有自己的this,箭头函数的this是上下文环境的this */
/* let obj1 = {
name:"张三",
fn:function(){
console.log(this)
}
}
let obj2 = {
name:"李四",
} */
/* 普通函数的this可以被call 或apply修改 */
/* obj1.fn.call(obj2) */
/* 一个参数都没有箭头不能省略 */
let obj1 = {
name:"张三",
fn:()=>{
/* 目前的环境下的this是window */
console.log(this)
}
}
let obj2 = {
name:"李四",
}
obj1.fn()/* this指向window 当前上下文环境
箭头函数的this不会被call 或者apply 修改 */
obj1.fn.call(obj2)
</script>
https://v3.bootcss.com/javascript/#carousel
<style>
#lunbo{
width: 600px
height: 400px
margin:30px auto
}
</style>
</head>
<body>
<h1>首页</h1>
<div id="lunbo">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators 指示器 -->
<ol class="carousel-indicators">
<!-- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
</ol>
<!-- 主体的图片 -->
<div class="carousel-inner" role="listbox">
<!-- <div class="item active">
<img style="width: 600pxheight: 400px" src="https://img1.baidu.com/it/u=1436422813,4001806688&fm=253&fmt=auto&app=138&f=JPG?w=936&h=500" alt="...">
<div class="carousel-caption">我的小拼</div>
</div>
<div class="item">
<img style="width: 600pxheight: 400px" src="https://img2.baidu.com/it/u=2356236633,2979184987&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="...">
<div class="carousel-caption">我的小多</div>
</div>
<div class="item">
<img style="width: 600pxheight: 400px" src="https://img2.baidu.com/it/u=3429472705,3961913284&fm=253&fmt=auto&app=138&f=JPEG?w=580&h=326" alt="...">
<div class="carousel-caption">我的小多多</div>
</div>-->
</div>
<!-- Controls 向左 向右控制图片-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div style="text-align: center">
<button onclick="prevFn()">向前</button>
<button onclick="nextFn()">向后</button>
<button onclick="pauseFn()">暂停</button>
<button onclick="goDuo()">跳转19岁女大学生失联</button>
<button onclick="leftR()">从左到右</button>
</div>
<script src="./jquery-1.12.4.js"></script>
<script src="./bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 2000
})
function prevFn(){
$('.carousel').carousel('prev')
}
function nextFn(){
$('.carousel').carousel('next')
}
function pauseFn(){
$('.carousel').carousel('pause')
}
function goDuo(){
$('.carousel').carousel(1)
}
function leftR(){
$('.carousel').carousel('cycle')
}
$.ajax({
url:"https:调用接口//也可以直接在原文复添加图片地址",
method:"post",
data:{
page:1,
count:5
},
success:res=>{
let { result } = res
let str1 = ''
let str2 = ''
result.forEach((item,index)=>{
str1 +=`
<li data-target="#carousel-example-generic" data-slide-to="${index}"></li>
`
str2 += `
<div class="item ">
<a href="${item.path}">
<img style="width: 600pxheight: 400px" src="${item.image}">
<div class="carousel-caption">${item.title}</div>
</div>
`
})
$('.carousel-indicators').html(str1)
$('.carousel-inner').html(str2)
$('.carousel-inner .item:first').addClass('active')
}
})
</script>
https://www.swiper.com.cn/usage/index.html
<link rel="stylesheet" href="./swiper-bundle.min.css">
<style>
.swiper {
width: 600px
height: 300px
}
.swiper-slide img {
width: 600px
height: 300px
display: block
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://img0.baidu.com/it/u=3519534124,1254775703&fm=253&fmt=auto&app=138&f=JPG?w=889&h=500" alt="">
</div>
<div class="swiper-slide">
<img src="https://img1.baidu.com/it/u=1037786612,1020382020&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
</div>
<div class="swiper-slide">
<img src="https://img0.baidu.com/it/u=3288667263,3070739640&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div>-->
</div>
<script src="./swiper-bundle.min.js"></script>
<script src="./jquery-1.12.4.js"></script>
<script>
/* Swiper('对应的类名') */
var mySwiper = new Swiper('.swiper', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
/* 切换反转效果 */
effect: 'cube',
/* 自动播放效果 */
autoplay: {
delay: 1000, //1秒切换一次
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
</script>
</body>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">.menu{border:solid 1px bluewidth:140pxfont-size:16pxpadding:5pxmargin:0 auto}.menu a{display:blocktext-align:centercolor:redwidth:130pxheight:1.5empadding:4pxtext-decoration:noneposition:relative}.menu span{display:blockborder-style:solidborder-width:8pxoverflow:hiddenposition:absolutetop:4pxwidth:0pxheight:0pxoverflow:hidden}.menu a:link span{display:none}.menu a:hover span.left{display:blockborder-color:whiteborder-left-color:blackleft:8px}.menu a:hover span.right{display:blockborder-color:whiteborder-right-color:blackright:8px} http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 我改了一下，在IE7和FF3下测试通过，不知道是不是你要的效果，如果有出入的话我们可以再交流。
